Can I use the Lottie integration with the Webflow CMS to dynamically fill a Lottie element on each individual CMS entry using a uploaded JSON file?

Webflow doesn’t natively support filling a Lottie element dynamically with a JSON file from each CMS entry, but there are workarounds.

​

1. Upload Your Lottie Files

• You can upload the Lottie JSON files to an external storage service such as Amazon S3 or Google Cloud Storage.
• Ensure each Lottie file is publicly accessible so it can be loaded in Webflow.

​

2. Store URLs in the CMS

• In your Webflow CMS collection, create a new field (e.g., Lottie URL) to store the URL for each JSON file.
• Enter the corresponding public URLs of your Lottie files for each CMS item.

​

3. Add Lottie Player to Your Webflow Project

• Use an Embed element to integrate the Lottie Player in your Webflow project.
• Include the Lottie Player script by adding it in the Project Settings under the Custom Code section.

​

4. Dynamically Set Lottie URL

• Bind the Lottie URL: In the Embed element, use the field from the CMS where you stored the URLs.
• Reference the URL in the embed code to dynamically load the JSON for each CMS entry.

​

5. Preview and Publish

• Preview your site to ensure that the correct Lottie animation loads for each entry.
• Publish the changes to see your dynamic Lottie animations live.

​

Summary

Although Webflow doesn’t directly support dynamic Lottie integration with CMS, you can manually upload Lottie files to third-party storage, use the CMS to store these URLs, and embed the Lottie Player to dynamically load them.