Can I select the version of Lottie that Webflow is using? The current version being used is 5.7.13, which is nearly 2 years old. The latest version, 5.12.2, has support for rendering specific features in Canvas mode that can't be achieved with the older version. Launching a site with complex animations in SVG mode is not viable due to performance issues on devices. Can I get assistance with this issue?
TL;DR
- Webflow uses a fixed Lottie player version (5.7.13) with no UI option to update or change rendering mode.
- To use a newer version or Canvas mode, manually embed your animation with a custom script and lottie.loadAnimation() using JavaScript.
Webflow currently does not allow users to select or update the version of the Lottie player it uses within the Designer. It locks the built-in Lottie integration to version 5.7.13, and this version cannot be changed via the UI or settings.
1. Webflow's Lottie Integration Is Locked
- Webflow uses a static version of the Lottie Web player (5.7.13) which is baked into its animation engine and limited to SVG rendering by default.
- There's no setting or toggle in the Webflow Designer or Project Settings to upgrade the Lottie player or switch rendering modes to canvas or HTML.
2. Workaround: Embed a Newer Lottie Player Manually
If you need Canvas mode or want the newest features from Lottie 5.12.2:
- Host the animation manually by embedding it with your own Lottie player instance using a custom embed.
- Upload your
.jsonLottie file to your Webflow assets or external hosting (like AWS, Firebase, or jsDelivr). - Use a script tag in an Embed element to load the latest Lottie version from a CDN (e.g.,
https://unpkg.com/lottie-web@5.12.2/build/player/lottie.min.js). - Instantiate the animation manually with
lottie.loadAnimation()specifying renderer: 'canvas'.
3. Limitations of This Approach
- You lose access to Webflow’s native Lottie interaction controls (like scroll-based animation).
- You'll need a basic understanding of JavaScript to set up the
lottie.loadAnimation()configuration and trigger the animation under certain conditions (e.g., on page load, scroll, or click). - Responsiveness and other integrations (with IX2 animations) would need to be manually recreated using JavaScript.
Summary
Webflow locks the built-in Lottie version to 5.7.13, and it cannot be updated or set to Canvas mode via project settings. To use newer versions or rendering modes like Canvas, use a custom embed with the latest Lottie player and initialize it manually with JavaScript.