Insert Lottie animations into Webflow using the LottieFiles App

Before you start, ensure that your web layout is ready within your Webflow project, with containers set up where you want to insert animations. 

Follow these steps to insert a Lottie animation animation:

1. Open the the LottieFiles app on your Webflow project.
2. You can use the search functionality to find the animation you want to use from Discover tab for public animations or from your own Workspaces.
3. Click on your preferred animation. You can use the Color Palette features to customise the animation color.
4. Once you are all set, click on Insert Animation to add it to your project. The animation will be added to Webflow in the format of dotLottie.
5. In the settings menu, ensure that you check the Loop button if you want the animation to play continuously.
6. Click on the navigator within Webflow to confirm that you have placed your animation in the correct container within your layout. 

Updated May 08, 2024 11:08