Lottie Animation
Display any Lottie animation in your application. Create markers, interact and synchronize your animation with other components (scrolling, movement...).
Developed by Airbnb teams,
Lottie is an open source iOS, Android and React Native library that generates animations in real time, allowing apps to use animations as easily as they use static images. These SVG animations are smoother, lighter and offer more control.
Learn more: Lottie (Bodymovin): High-Quality Animations For Your App
Select a Lottie animation
Lottie's website has many animations that you can use and customize.
To download a Lottie animation:
- Go to lottiefiles.com and select your animation.
- To view a Lottie animation in PandaSuite, you need the JSON file.
- Click on the Download button and select Lottie JSON
- Once you have downloaded this file, compress it in ZIP format
💡 If you only want to display the animation using an Internet connection, you can use the URL of the animation in a web component. Use the URL within the iFrame code block.
Export your Lottie animation from After Effects
There are two plugins you can use to create a Lottie file: the
LottieFiles plugin or the
Bodymovin plugin.
To export with the Bodymovin plugin:
- Download the Bodymovin plugin.
- Open your project in After Effects.
- Go to Windows > Extensions and open the Bodymovin plugin.
- Select the composition you want to export and choose a destination folder.
- Click the Render button to see the composition render and preview your animation.
-
Go to the destination folder and find your animation in JSON format. If you had images, you also have an Images folder
-
Select all the files in the root and compress them in ZIP format..
Display in your application
To insert your Lottie animation into your application:
- Click on Components and insert the Lottie Animation component.
- As Source, select the ZIP file of your animation.
- Specify the name of the JSON file (for example 43792-yoga-se-hi-hoga.json)
- Double-click on the component to display it
You can play the animation from the edition window.
Customize the animation with the following properties:
Loop,
Speed (min/max) and
Auto play.
By default, the animation is based on the web view, which allows for greater compatibility. You can choose to use the native iOS and/or Android version for better performance, but be careful about device compatibility.
Add markers
You can identify one or more frames in your animation that will serve as a trigger or object for an action.
To add a marker to your Lottie animation:
- Double-click on the component
- In the edition window of your marker, click on the + button
- Play your animation and stop it on the frame of your choice.
You can change the name of your marker, modify the frame manually.
This marker then appears in the list of triggers and actions of your Lottie animation.
Trigger an action from your Lottie animation
Select your component and add a new action.
Here are the available
triggers:
- Finish playing
- Pause playing
- Start playing
- Stop playing
Create an action on your animation
Choose an object, the trigger and the action
Interact with a component.
Here are the available actions:
- Change frame
- Play/Pause
- Play
- Pause
- Increase/decrease speed
- Move forward/backward
- Restart from beginning
- Set speed
- Stop
- Go to
Synchronize with another component
To synchronize your Lottie animation with another component (for example the motion sensor), insert the
Synchronization component from Components.
In the properties, click on Add Component. Choose the Lottie Animation component and the other component from the list. Select the Lottie Animation component and click on Frames in the options.