📌 Note: To ensure everything works seamlessly, your lottie files must always be in dot.lottie format (.lottie) - other formats are not supported by Onepage.
You can also find free dot.lottie files at lottiefiles.com.
Step 1: Download Lottie animation
Download Lottie animation: Visit a platform like lottiefiles.com and download an animation in dot.lottie format. Make sure that the format is correct so that everything works properly.
If you already have a Lottie file, go to step 2.
Step 2: Add Lottie animation to your website
To add a Lottie file, simply insert an image element into any section of your page. Then select the desired Lottie file.
📌 Note: You also have the option of choosing the Lottie file directly from the library if you have uploaded it there. This way, the animation is quickly and easily integrated into your page. 😊
Step 3: Call up Lottie settings
Once you have integrated the Lottie file, you can now adjust the settings for the animation. Click on the embedded Lottie animation to display the options.
Step 4: Customize Lottie settings
Here you can set parameters such as the playback speed, the loop options (whether the animation is repeated) and the start and end time of the animation.
You can also set whether the animation is triggered when scrolling or hovering, depending on how you want to present the animation on your page. With these customizations, you can design the Lottie animation just the way you want it!
Autoplay: The animation is played automatically as soon as the page is loaded - without users having to do anything.
On click: The animation starts when the user clicks on the element. Perfect if you want an interaction before the animation starts.
On hover: The animation plays when the user moves the mouse over the element (hover). Ideal for drawing the user's attention to certain areas.
Sync with scroll: The animation is played in sync with the scrolling of the page. The further the user scrolls down, the more the animation plays - ideal for displaying the animation in a progression.
⚠️ Important: Please note that the effects may not always be visible in the editor. However, they are displayed correctly in the live version.
🎉 With these options, you can design the animation to match your design exactly!
💡Do you have any feedback concerning this article? Please let us know through our live chat or at support@onepage.io, so we may keep it up to date. Thank you! 🙂