Display any Lottie animation in your application. Create markers, interact and synchronize your animation with other components (scrolling, movement...).
Select a Lottie animation
Lottie's website has many animations that you can use and customize.
- 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
- 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
- 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
- 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.
Trigger an action from your Lottie animation
- Finish playing
- Pause playing
- Start playing
- Stop playing
Create an action on your animation
- Change frame
- Increase/decrease speed
- Move forward/backward
- Restart from beginning
- Set speed
- Go to
Synchronize with another component
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.