In our journey to redesign our website, particularly the 'Work' page, we aimed to feature each client's unique visual identity using custom Lottie animations. We encountered a challenge: Webflow CMS does not support Lottie animations out of the box. Determined to find a solution, we devised a method to integrate these animations seamlessly into our projects. This guide outlines the process we followed, so you can do the same.

Step 1: Create Your CMS Collection

Begin by creating a CMS collection for the page that will feature the Lottie animations. The essential action in this step is to create a field named "Lottie link." This field will store the URLs for your Lottie animations, effectively linking your creative designs with the live website experience.

Step 2: Prepare Your Lottie Animations

Upload your Lottie JSON files to Webflow's asset manager. Once uploaded, copy the URLs for these files and populate the "Lottie link" field in your CMS collection accordingly. This step ensures that each piece of your content can display its animation.

Step 3: Embed Your Animation

On your page, add an embed component at the intended spot for the animation on your page. Feel free to use any class name that aligns with your design preferences and page structure.

Step 4: Implement Your Custom Script

Incorporate the following script within your embed component to utilize the Lottie animation:

 <script src="https://unpkg.com/@dotlottie/player-component@latest/dist/dotlottie-player.mjs" type="module"></script>
<dotlottie-player src="INSERT LOTTIE LINK HERE" background="transparent" speed="1" style="width: 100%; height: 100%" direction="1" mode="normal" loop autoplay></dotlottie-player>

This snippet allows for customization of playback speed, direction, and whether the animation should loop automatically. Replace "INSERT LOTTIE LINK HERE" with the specific "Lottie link" URL from your CMS collection.

Step 5: Publish and Test

With everything in place, publish your site and see how the animations add life to your page. It's a process that might require some tweaking to get perfect, but the result is a more dynamic and engaging website.

We invite you to visit our 'Work' page to see the results firsthand, experience the difference that Lottie animations can make and get inspired for your own Webflow projects.

Conclusion

Our journey into integrating Lottie animations with Webflow CMS was a learning curve, and we're glad to share these insights with you. We hope this guide helps you bring a new level of interactivity and engagement to your Webflow projects. Happy design and development!