The Lottie Component

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: Interactive & Lightweight Animations For Web & Mobile

Create 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.

You can also export an animation from After Effects or in Lottie using the After Effects or Figma plugins.

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.