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
- Webflow CMS doesn't support direct Lottie JSON uploads, but you can host the files externally (e.g., GitHub, Dropbox, AWS) and store their URLs in a plain text CMS field.
- Use a custom embed with Lottie Web Player and bind the CMS field URL to dynamically render animations on CMS pages.
You cannot directly upload Lottie JSON files into the Webflow CMS and dynamically load them into Lottie elements on CMS pages. Webflow currently does not support storing or rendering uploaded JSON files from CMS fields in this way.
1. Webflow CMS Limitations for Lottie
- Webflow CMS does not allow JSON file uploads directly into CMS fields.
- The File field in CMS collections only supports uploads like PDFs, ZIPs, or images, but not
.jsonfiles for use in Lottie. - The Lottie element in Webflow requires a Lottie animation to be uploaded into the Designer or referenced by a static URL (e.g., from an external host like AWS or Dropbox).
2. Alternative Method: Host JSON Files Externally and Store URLs
To achieve dynamic Lottie animations per CMS item, use externally hosted JSON files and save their direct URLs in a Webflow CMS plain text field.
- Host each Lottie JSON file in a service like:
- GitHub (via raw.githubusercontent links)
- Dropbox
- AWS S3
- Google Cloud Storage
- Copy the direct file URL and paste it into a CMS plain text field (e.g., named
Lottie URL).
3. Embed Custom Code to Render Lottie with CMS URL
Use a custom embed on the CMS template page to dynamically render the Lottie animation. Example:
- Add an Embed element and insert generic Lottie web player code.
- Pull the Lottie file URL from your CMS field, like:
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script><lottie-player src="{{cms-embed 'lottie-url'}}" background="transparent" speed="1" style="width: 100%; height: 300px;" loop autoplay></lottie-player>Make sure:
- The CMS field slug you used (e.g.,
lottie-url) is correct. - External hosts are allowing CORS (Cross-Origin Resource Sharing) so that the Lottie file can be loaded in the browser.
Summary
You cannot upload and use Lottie JSON files directly inside the Webflow CMS, but you can host them externally and pull them into the CMS using a plain text field and a custom embed. This effectively allows each CMS item to show a unique Lottie animation dynamically.