Webflow sync, pageviews & more.
NEW

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 Lottie v5.7.13 with no option to update or enable canvas rendering.
  • To use newer Lottie features like canvas rendering, upload your JSON file and implement animations via custom code embeds using the latest Lottie script and manual initialization.

Webflow currently does not allow users to choose or manually update the version of the Lottie library used. The platform is integrated with a specific version (as you noted, 5.7.13), and this is managed internally by Webflow.

1. Webflow’s Current Support for Lottie

  • Webflow uses Lottie Web v5.7.13 for built-in Lottie animations.
  • Users cannot change or override the Lottie version within the Designer or via Project Settings.
  • This version does not support newer features available in v5.12.2, including improved canvas rendering or other advanced animation capabilities.

2. Limitations for Canvas Rendering & Performance

  • Since SVG mode is the default and only supported rendering option within Webflow’s built-in UI, performance on complex animations can be poor, especially on mobile devices.
  • Canvas rendering (which can significantly improve performance) was added in Lottie v5.8.0+, making it unavailable in Webflow's current integration.

3. Workaround Using Custom Code Embed

To use a newer version of Lottie and leverage canvas rendering, you’ll need to bypass Webflow’s native animation tools:

  • Upload your animation JSON to Webflow’s Assets panel or to an external CDN.
  • Use a custom code embed (inside an Embed element or in Page Settings > Before tag) to load the latest Lottie version and initialize the animation manually.
  • Include the latest Lottie script (e.g., https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.12.2/lottie.min.js).
  • Initialize your animation using Canvas renderer (e.g., renderer: 'canvas').

4. Trade-offs of the Workaround

  • You lose Webflow’s animation linking and timeline controls (e.g., no scroll animation sync).
  • Requires manual setup, including defining triggers and interactions via JavaScript if needed.
  • Provides better performance and modern rendering features for power users or developers.

Summary

Webflow does not currently support choosing or updating the Lottie version, which limits access to canvas rendering and newer features found in v5.12.2. To use the latest version with canvas mode, you’ll need to implement Lottie via custom code embeds, giving up Webflow’s native animation features for more control and performance.

Rate this answer

Other Webflow Questions