Vev Help Center
Search…
Lottie Animation
Add and customize a Lottie animation on your canvas
Developed by Airbnb, Lottie has become the preferred library and file format for animations due to its incredibly small file sizes. With Vev, you will be able to upload a Lottie JSON file and customize the behavior of the animation.
In this lesson:
  • Adding a Lottie Element
  • Customizing a Lottie Element
  • Examples

Adding a Lottie Element

Navigate to the Add Menu and select or search for the Lottie Element and click-n-drag onto your canvas.
To add a Lottie Element:
  • Navigate to the Add Menu
  • Click and drag onto your canvas
  • Double click on the Lottie Element to upload your JSON file and change parameters

Customizing a Lottie Element

The Lottie Element comes with multiple parameters to get your animation just right.
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.
To create this example:
  1. 1.
    Add a section to your canvas and set it at your desired height
  2. 2.
    Customize the background of the section, add a linear gradient at 45Β°
  3. 3.
    Add a Lottie Element to your canvas
  4. 4.
    Upload your JSON file and keep the default parameter settings
  5. 5.
    Toggle your Lottie Element to loop
  6. 6.
    Customize the size of the Lottie Element
  7. 7.
    Add text headings and a button link
Hot Tip: Lottiefiles and Ui8 are great marketplaces for free and paid resources including Lottie animations

Animate while the user scrolls the page

Great for visual storytelling, you can set your Lottie animation to progress as the user scrolls
To create this example:
  1. 1.
    Add a Section and set the height to be 3000px
  2. 2.
    Add a Lottie Element to your canvas
  3. 3.
    Upload your JSON file and change to Trigger - Progress controlled by the scroll
  4. 4.
    In the parameter settings, keep the offset blank
  5. 5.
    Customize the size of the Lottie Element

Animate when the user clicks

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:
  1. 1.
    Add a Lottie Element to your canvas
  2. 2.
    Upload your JSON file and change to Trigger - Play animation on click
  3. 3.
    In the parameter settings, toggle Loop on
  4. 4.
    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.
Note: This is an advanced example. This tutorial uses concepts like Animations & Interactions and origin.
To create this example:
  1. 1.
    Add a Lottie Element to your canvas - make sure to give it a unique name in the layer panel (this will let us select the trigger for that name)
  2. 2.
    Upload your JSON file and change to Trigger - Play animation on visible; in this case, we've used a blue circle that pulsates, letting the user know to hover
  3. 3.
    In the parameter settings, toggle Loop on
  4. 4.
    Customize the size of the Lottie Element and position it on top of the specific hotspot area
  5. 5.
    Create a text box and add an animation > on hover> presets 'custom', 'move horizontal', 'opacity' (see screenshot below for exact parameters)
  6. 6.
    In the animation tool, set the custom trigger to the name of the Lottie element. In this case, 'Dot three'
  7. 7.
    Voila! When a user hovers over the specific Lottie element a text box will appear and slide in
​
Last modified 2mo ago