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?
- Webflow uses a fixed Lottie.js version (5.7.13) with no built-in way to upgrade or switch versions.
- To use a newer version like 5.12.2 with Canvas rendering, manually embed the Lottie player via custom code, host the animation JSON externally, and initialize it with JavaScript.
Webflow currently does not provide a way to choose or update the Lottie.js version it uses for native Lottie animation integrations. As of now, Webflow’s built-in Lottie support is tied to version 5.7.13, and there's no official interface or customization option to upgrade to newer versions like 5.12.2 within the Designer or project settings.
1. Webflow's Built-In Lottie Integration Limitations
- Webflow integrates Lottie via its native animation tools, but this support is locked to Lottie.js 5.7.13.
- That version does not support some newer rendering features, especially in Canvas mode, which impacts performance on complex animations.
- Webflow’s default output uses SVG rendering, which is more widely compatible but less performant for detailed or high-frame-rate animations.
2. Workaround: Embedding the Latest Lottie Version Manually
To use a newer Lottie version (e.g., 5.12.2) and enable Canvas rendering, you'll need to bypass Webflow’s native integration and embed Lottie manually using custom code:
- Host the animation as JSON (using an asset manager or external server).
- Include the latest Lottie script manually, such as from jsDelivr or unpkg (e.g.,
https://unpkg.com/lottie-web@5.12.2/build/player/lottie.min.js). - Add a custom container div with an ID for the animation mount point.
- Use custom JavaScript in the page’s Footer or Embed component to initialize the Lottie animation with desired settings (
renderer: 'canvas', etc.).
3. Limitations and Considerations
- This method disables Webflow’s native Lottie animation controls, such as scroll-triggered play or timeline-based interactions.
- You'll need to manage all logic programmatically (e.g., auto-play, scroll sync, or interactivity) using Webflow's IX2 APIs or custom JavaScript.
- Make sure to test cross-browser behavior, especially on mobile and low-performance devices.
Summary
Webflow does not support selecting the Lottie version—it’s fixed at 5.7.13. To use newer features in Lottie 5.12.2, especially with Canvas rendering for better performance, you must embed the Lottie player manually and configure it via custom code outside Webflow’s native integration.