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.
Add a Lottie animation
As an element
From the top menu bar, click the Add Menu (
Shortcut: M)Search for and select Lottie Animation
Click and drag the element onto your canvas
As a section
From the top menu bar, click on the Add Menu (
Shortcut: M)Search for and select Lottie Animation
Click it
Press Alt
Click where it says Add section here
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 element to open the configuration options.
The configuration options are detailed in the chart below:
Parameter | Options |
Lottie JSON file | Upload your JSON file. |
Trigger - Play animation when visible | The animation will start when the element is in view. |
Trigger - Play animation on hover | The animation will start on hover. |
Trigger - Play animation on click | The animation will start on click. |
Trigger - Progress controlled by scroll | The animation will progress as the user scrolls the page. |
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:
Add a section to your canvas and set it at your desired height
Customize the background of the section, add a linear gradient at 45°
Add a Lottie Element to your canvas
Upload your JSON file and keep the default parameter settings
Toggle your Lottie Element to loop
Customize the size of the Lottie Element
Add text headings and a link button
⭐️ Tip: Lottiefiles and Ui8 are great marketplaces for free and paid Lottie animations
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 Section and set the height to be 3000px
Add a Lottie Element to your canvas
Upload your JSON file.
Change the trigger to Progress controlled by scroll
Set position to Top
Keep the offset parameters blank
Customize the size of the Lottie Element
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
Upload your JSON file
Set the trigger to Play animation on click
Toggle Loop on
Customize the size of the Lottie Element
Configure a Lottie animation to trigger an interaction
You can set a Lottie element to trigger an interaction or animation with another element. In this example, we've recreated a specific interaction on the SpaceX Dragon landing page.
When a user hovers over a blue pulsating hotspot, we want text boxes to appear to display more information.
Tip: This is an advanced example. This tutorial uses concepts like Animations, so we recommend reading this article to learn more about how they work.
To create this example:
Add a Lottie Element to your canvas
Give it a unique name in the Page Content Panel (this will let us select the trigger for that name)
Upload your JSON file
Set the trigger to Play animation on visible
Toggle Loop on
Customize the size of the Lottie Element and position it on top of the specific hotspot area
Create a text box and add an animation on hover to it (see screenshot below for exact parameters)
In the animation settings, set the custom trigger to the name of the Lottie element. In this case, Dot three
Voila! When a user hovers over the specific Lottie element a text box will appear and slide in.