Webflow sync, pageviews & more.
NEW

How can I fix the issue with exporting an animation to JSON using the Bodymovin extension after the new After Effects update in Webflow?

TL;DR
  • Update Bodymovin to the latest version and restart After Effects.
  • Use After Effects 2023 for best compatibility with Bodymovin exports.
  • Fix any expression errors and avoid unsupported features like 3D layers or effects.
  • Adjust Bodymovin export settings properly and render the JSON file.
  • Test the Lottie file in Webflow by uploading and previewing the animation.

Recent After Effects updates can cause issues with exporting animations to JSON via the Bodymovin extension, which Webflow uses for Lottie file integration. Here's how to resolve the issue.

1. Update Bodymovin to the Latest Version

  • Open After Effects and go to Window > Extensions > Bodymovin.
  • Click on the gear icon in the Bodymovin panel to check the version.
  • If it's outdated, download the latest version of Bodymovin from the LottieFiles plugin page or via the ZXP Installer.
  • Restart After Effects after the update.

2. Ensure Compatibility With After Effects

  • After major After Effects updates (e.g., v24+), older Bodymovin versions may fail.
  • Bodymovin currently has the best compatibility with After Effects 2023 (v23.x). If necessary, install that version via Creative Cloud > Other Versions to ensure stable Lottie exports.

3. Check for Expression Errors

  • Expressions that use deprecated syntax (like old-style loopOut() or time-based math) may break with new AE versions.
  • Review your animation layers for expression errors indicated by yellow warnings in the Timeline panel.
  • Fix or disable problematic expressions before exporting.

4. Adjust Bodymovin Export Settings

  • In the Bodymovin panel:
  • Choose the correct Composition.
  • Set an Output folder.
  • Enable "Include in JSON" for assets only if needed.
  • Turn off unused options like "Demo," "Glyphs," or "Hidden layers" to reduce risk of errors.
  • Click Render to generate the .json file.

5. Avoid Unsupported Features

  • Bodymovin does not support these features:
  • Effects (e.g., blur, glow)
  • 3D layers
  • Expressions using plugins or scripts
  • Matte/Modes that aren’t supported
  • Flatten or convert layers where needed.

6. Test the Lottie File in Webflow

  • Go to Webflow Designer > Assets and upload the JSON file.
  • Drag a Lottie animation element onto the canvas and assign your file.
  • Confirm the animation runs in Preview mode.

Summary

To fix Bodymovin JSON export issues after an After Effects update, update the Bodymovin plugin, avoid unsupported features, and if necessary, roll back to After Effects 2023. This ensures full compatibility with Webflow’s Lottie framework.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
How long does it typically take to duplicate a Webflow project? I have attempted twice with several hours in between, but the duplicated projects are not appearing. The website contains numerous CMS items and is of considerable size, so I'm unsure why the duplication process would take so long. Is a lengthy duration common for duplicating projects in Webflow?
How can I add preloaded images as options for users to select or add in Webflow CMS for different produce varieties?
How can I create a parent div with 100% width and manually change the height at a specific breakpoint in Webflow, and have an image that covers the parent div as well as a gradient div on top, without using background images? And can you please provide guidance on how to learn these basic concepts in Webflow?
How can I create a fixed menu on Webflow's mobile version without causing page scroll behind the menu? Disabling the scroll offset option doesn't seem to work. Placing the navbar at the top also doesn't resolve the issue. What could be the problem with this option?
How can I pass UTM data from a Webflow popup form to a Hubspot Contact record?
How can I combine (formerly FoxyCart) with Webflow Collections to test the flexibility and implementation of different types of products, variants, and add-ons in a store, while utilizing CMS custom fields for images, categories, pricing, cart, and product info?
Why do all my Webflow site pages have a horizontal overlay, even after trying to hide overflowing content and using elements with 100vh?
How can I highlight the 'current' page in Webflow CMS collection template pages for my nav-bar links? (For example, I have a page called 'case studies' that shows items from a CMS collection also called 'case studies'. When showing the CMS collection template page for each case study, I want the nav link for 'case studies' to be highlighted to indicate the user's current location on the site). Can anyone suggest a solution? Thank you.
How can I center an image in a column in Webflow?
How can I find the "Wrapper" component in Webflow while reviewing a template I purchased from the store?
How can we style the dropdown field in Webflow forms?
How can I use JavaScript to move a specific <div id="me"> element, including its content, into another <div class="this_target"> element in Webflow?
What are some third-party tools and integrations that can be used with Webflow?
How can you maximize your Webflow site performance and improve speed and load times?
Is there a code in Webflow that can automatically redirect an idle page back to the Home page after a certain period of time?
Can Webflow be used to call a CSS or JS file stored on a different server, instead of hosting them on GitHub?
How can I dynamically redirect to a CMS created after form submission in Webflow?
In Webflow, how can I hide specific elements in the footer (such as "Ramin Khaze The Difference" and "Schedule showing") when the URL contains a certain parameter, such as "?mls"? I am a beginner in coding and would appreciate any help. Thank you!
How can I prevent the "w-current" class in Webflow from overriding the height of my custom class on a link block element?
Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?
How do I mirror user input from a form field to a non-form text field on the same Webflow page in real-time using JavaScript?
How can I close a dropdown in Webflow when clicking on a link?
Is there a more optimal way to create a portfolio section with a sticky image container that changes as you scroll, similar to the design on Deveb's website, that works across different web browsers, especially Safari, using Webflow or any other JavaScript tools?
How can I implement a multi-select field with a pre-selected option in a popup form on a collection page using Webflow?
How can I alternate the layout of the image and heading for each collection item in a two-column format on Webflow?
How can I execute JavaScript code when clicking a specific button with a given ID in a Webflow project?
How can I disable the Webflow success or failure state for a sign-up form and display a custom thank you page using jQuery and the Webflow form submit state?
How can I create a vertical scrolling menu with Webflow, similar to the one on Apple's website, that switches to horizontal scrolling when the menu doesn't fit on one screen?
How can I change the language of the Google Maps embed from English to Arabic in Webflow?
How can I reduce the vertical space between lines within a bullet point in Webflow? Can I replace the bullet points with icons on the "Services" page?