Skip to main content
LottieFiles

Add and customize a Lottie animation on your canvas.

Diego Muralles avatar
Written by Diego Muralles
Updated over a week ago

Lottie is a JSON/.lottie file vector animation 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

Configuring the LottieFiles component

Double-click the LottieFiles component on the canvas, and head over to the Properties panel on the right side to browse the available settings. Read about what each of them do below.

Parameter

Options

Lottie file

Upload your JSON or .lottie file

Autoplay

Toggle on to play the animation when it is in view.

Loop

Toggle on to loop the animation continuously.

Hide controls

Toggle on to hide the controls.

Playback speed

Change the speed of the animation by adjusting the slider.

Colors

Adjust the colors of the Lottie animation.

Custom interactions for LottieFiles

The LottieFiles component has custom interactions to make your animation more immersive. Below you can find what triggers and actions are custom to the component.

Trigger

Definition

On play

When Lottie starts playing it initiates an action in the target.

On pause

When Lottie pauses it initiates an action in the target.

On loop end

When Lottie is looping and at each end of the loop it initiates an action in the target.

On end

When Lottie is not looping and at the end of the animation it initiates an action in the target.

Action

Definition

Play

The Lottie starts playing the animation.

Play reverse

The Lottie starts playing the animation in reverse.

Pause

The Lottie pauses the animation.

Toggle play

The Lottie toggles the animation play (if playing, then stops playing or vice versa).

Reset animation

The Lottie resets the animation.

Note: An excessive number of LottieFiles may impact loading times and we recommend testing as you progress.

Did this answer your question?