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! 🌟
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:
Parameter | Options |
Lottie JSON file | Upload your JSON file. |
Play animation trigger |
|
Loop | Toggle to loop the animation continuously. |
Speed | Change the speed of the animation by %. |
Preserve aspect ratio | Toggle to preserve the aspect ratio based on the container size. |
Examples
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.
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.
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.