Lottie is a JSON/.lottie file vector animation has become the preferred library and file format for animations due to its minimal 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! 🌟
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 does 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. |
⚠️ Performance note: Using many Lottie animations on the same page may slow down load times. Test performance as you build.