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?
TL;DR
- Upload Lottie JSON files to the CMS File field and publish the collection to generate static URLs.
- Add a Custom Embed element to the CMS Collection Page with Lottie’s script and a container div.
- Dynamically bind the JSON file URL from Webflow’s CMS into the path property of the embed script.
- Customize animation settings like looping, autoplay, or container styling if needed.
Yes, you can use Webflow CMS to dynamically apply a Lottie animation to each CMS item by uploading a JSON file. However, Webflow’s built-in Lottie element does not support direct CMS binding for the Lottie animation file. You need to work around this by using Embed Code with a CMS-hosted JSON file.
1. Upload JSON Files to Webflow CMS
- Go to CMS Collections and create a File field.
- Upload your Lottie JSON files individually for each CMS entry.
- Publish your CMS items so each file gets a static URL.
2. Add an Embed Element for Lottie
Open your CMS Collection Page.
Drag a Custom Embed element into the page.
Paste the following embed code inside:
```html
\`\`\`
3. Bind the JSON File Dynamically
- Replace
{{CMS File URL Field}}with Webflow’s dynamic field for the File URL (click the + Add Field button inside the embed). - The JSON file will now be different for each CMS entry.
4. Customize the Embed or Style it
- Change the div container ID if needed (e.g.,
lottie-container→my-animation). - Modify Lottie settings such as:
- loop: Set to
falsefor one-time play. - autoplay: Set to
falseto play on user interaction.
Summary
Webflow CMS does not natively allow binding JSON files to Lottie elements, but by using a Custom Embed, you can dynamically load Lottie animations from uploaded JSON files. The File field in CMS provides a direct URL for each animation, which can be inserted into the path property of the embed code.