# Lottie

> Learn how to display and interact with Lottie animations in your applications using the Lottie component, developed by Airbnb. Explore creating markers, exporting animations from After Effects, and synchronizing components for enhanced functionality.

https://docs.pandasuite.com/essentials/components/lottie/

**Display any Lottie animation in your application. Create markers, interact and synchronize your animation with other components (scrolling, movement...).**

Developed by Airbnb teams, [Lottie](https://lottiefiles.com/) 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](https://blog.pandasuite.com/lottie-bodymovin-high-quality-animations-for-your-app/)

## Create a lottie animation

[Lottie](https://lottiefiles.com/featured)'s website has many animations that you can use and customize.

[Video: LottieFiles home page: featured free animations are listed and the cursor hovers over one of them to select it]

Select your animation on Lottie's website

To download a Lottie animation:

- Go to [lottiefiles.com](https://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

[Video: Yoga Se Hi hoga animation playing on LottieFiles: a woman meditates in the lotus position, surrounded by green orbits]

> **Info**
>
> 💡 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](https://lottiefiles.com/plugins/after-effects) or [Figma](https://lottiefiles.com/plugins/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

[Image: Lottie Animation component on a yoga screen, with its ZIP Source, JSON file name, Loop, Auto play and Speed properties]

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.

[Image: Lottie edition window of a bee animation: playback stopped at frame 67 of 90, where the Landing marker is created with the + button]

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](https://docs.pandasuite.com/essentials/interactions/triggers/):

- **Starting play**
- **Pause playing**
- **Stopping play**
- **Finish playing**

[Image: Triggers of the Lottie bee animation: the Frame 67 - Landing marker, then Starting play, Pause playing, Stopping play, Finish 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**
- **Stop**
- **Seek**
- **Forward** and **Rewind**
- **Restart from beginning**
- **Set speed**
- **Increase speed** and **Decrease speed**

[Image: Interact with a component on the bee Lottie animation: its actions, from Change frame to Rewind, framed]

### Synchronize with another component

To synchronize your Lottie animation with another component (for example the motion sensor), insert the [Synchronization](https://docs.pandasuite.com/essentials/components/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.