Lottie Animation

Add and customize a Lottie animation on your canvas

Diego Muralles avatar
Written by Diego Muralles
Updated this week

Lottie is a JSON-based vector animation that has become the preferred library and file format for animations due to its incredibly small file size and ability to scale without pixelation. Lotties work on basically any platform—web or mobile—making them perfect for creating Vev projects with responsive design.

Read more about Lottie animation in our blog post and learn about the difference between Lottie vs. GIFs! 🌟

Lottie animations in Vev

Configuration options

Once you've added the Lottie element to your canvas, it's time to upload your JSON file and adjust the configurations.

To start, double-click the Lottie animation to open the configuration options. The configuration options will open on the right panel as detailed in the chart below:



Lottie JSON file

Upload your JSON file.

Play animation trigger

  • Play animation when visible: The animation will start when the element is in view.

  • Play animation on hover: The animation will start on hover.

  • Play animation on click: The animation will start on click.

  • Progress controlled by scroll: The animation will progress as the user scrolls the page.


Toggle to loop the animation continuously.


Change the speed of the animation by %.

Preserve aspect ratio

Toggle to preserve the aspect ratio based on the container size.


Animate when visible

The easiest trigger to set is to animate when visible. This is great for building immersive headers and sections for your site.

Lottie animation examples in Vev

To create this example:

  • Customize the background of the section you're working on and add a linear gradient at 45°.

  • Add a Lottie Element to your canvas and Upload your JSON file while keeping the default parameter settings.

  • Toggle your Lottie Element to loop and customize the size of the Lottie Element. Add text headings and a link button

Progress controlled by scroll

Great for visual storytelling, you can set your Lottie animation to progress as readers scroll your page.

Lottie Animation examples in Vev

To create this example:

  • Add a Lottie Element to your canvas and upload your JSON file

  • Change the trigger to Progress controlled by scroll and set the position to Top.

  • Leave the offset parameters blank and then just customize the size of the Lottie

Animate on click

On-click animations with Lottie are great for creating unique interactions on your site. You can even trigger the animation to interact with other elements.

To create this example:

  • Add a Lottie Element to your canvas and upload your JSON file

  • Set the trigger to Play animation on click

  • Toggle Loop on and customize the size of the Lottie Element

Please note: there is no specific limit to the number of Lottie animations you can add to one project, we recommend testing as you progress. Excessive use of animations may impact loading times.

Did this answer your question?