How to use Lottie files ?
There are a couple of ways to use Lottie files with CMS. One of them is to add a link of Lottie (JSON file) to the CMS and then use it in the embed item.
In my demonstrations, you'll discover instances of Lottie animations featuring speed control, loop customization, and the ability to reverse direction in loop configurations. I employ the Bodymovin tool for rendering Lottie animations.
Here's a breakdown of the steps you've outlined:
Step 1. Create your Div Block
This is where you'll designate a section on your webpage where you want to embed the Lottie animation.
Step 2. Search and select the Lottie Animation element
In Webflow, you'll find an element specifically designed for embedding Lottie animations. You'll want to locate and select this element.
Step 3. Upload Lottie animation JSON file from Assets
This step involves uploading the actual JSON file from your local storage or the assets library in Webflow.
Step 4. Select the Lottie Animation JSON field and upload the JSON file
This is where you'll specify the JSON file that contains your Lottie animation. This file essentially holds the data that defines the animation.
Step 5. Upload the completed Lottie animation JSON file
Similar to Step 4, this step reiterates the importance of making sure you've uploaded the correct JSON file.
Step 6. Publish and check how it works
After completing the previous steps, you'll need to publish your website to see the Lottie animation in action. This will make it viewable to visitors.
By following these steps, you'll be able to integrate Lottie animations seamlessly into your website, complete with features like speed control, loop customization, and even the ability to reverse the animation's direction in loop configurations.
