Add a Lottie Element

Configuration options

Examples

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.

Lottie animations in Vev

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

Adding a Lottie animation

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.

Lottie animation 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 to your site.

Lottie animation examples in Vev

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.

Lottie Animation examples in Vev

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.

Lottie animation example

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.

Did this answer your question?