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.

Select your animation on Lottie's website

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

The Lottie Animation component

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.

Create markers from the edition window

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

The triggers ot the Lottie Animation component

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

The actions of the Lottie Animation component

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.