Webflow sync, pageviews & more.
NEW

Are other users experiencing lottie animations disappearing on Chrome with Webflow?

TL;DR
  • Check for Chrome-specific rendering bugs, especially on high refresh rate displays or with scroll-based animations.
  • Adjust Webflow settings: set Lottie display to block/flex, ensure correct positioning, and verify playback settings.
  • Use optimized Lottie JSON files avoiding unsupported features, and apply CSS fixes like backface-visibility or will-change.
  • Test the animation across browsers and devices to confirm if the issue is Chrome-specific.

Yes, some users have reported issues with Lottie animations disappearing or not displaying correctly in Chrome when used in Webflow. This is typically due to rendering quirks in Chrome or specific settings in the Lottie file/element.

1. Review Known Chrome Rendering Issues

  • Chrome updates can occasionally introduce rendering bugs that impact vector animations like Lottie.
  • This issue is more noticeable on high refresh rate monitors, certain GPU/driver combos, or when scroll-based animations are used.

2. Check Webflow-Specific Settings

  • Set the Lottie element’s display to block or flex instead of inline or auto.
  • Ensure positioning isn’t set to absolute or fixed unless necessary, and that parent containers are properly sized.
  • Verify that the loop/playback settings are correctly configured in the Lottie element.

3. Optimize the Lottie File

  • Use a clean JSON file exported with “Bodymovin” plugin in After Effects.
  • Avoid unsupported effects like expressions, effects layers, or 3D layers which may cause glitches.
  • Compress the animation using LottieFiles Editor or its optimization tools.

4. Add CSS Rendering Fixes

  • Apply backface-visibility: hidden or will-change: transform to the element.
  • You can add this via Custom CSS in Webflow Project Settings > Custom Code or the embed component.

5. Test Across Browsers and Devices

  • Check the animation in multiple browsers (Firefox, Safari) and on different devices to isolate if it’s specific to Chrome.
  • Use Incognito mode or disable extensions to rule out browser add-ons affecting rendering.

Summary

Lottie animations disappearing in Chrome on Webflow are a known issue linked to browser rendering quirks, element settings, or animation complexity. To resolve it, double-check the element’s Webflow settings, optimize the Lottie JSON, and apply CSS rendering fixes like will-change: transform.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
Is it possible to set the viewport in Webflow's code to address the mobile usability issue flagged by Google Search Console? Is this warning something I should be concerned about? Thank you!
Is there a Zap connector for Webflow to automate form submissions?
How can I add a site-wide banner above the fixed top navigation in Webflow without manually adding it to each page?
Can I overlay header text on top of a Lottie animation in Webflow for my website's header video?
What are some third party tools or integrations that can be used with Webflow?
Can Webflow handle a tool that recommends items based on user answers from a questionnaire, with data filtering done through third-party tools like Zapier or Automate? Where should the data be stored?
How can I create a pop-up window with specific dimensions, containing an H1/H2 title, paragraph text with external links, and a close button in Webflow?
Why is my client's website showing a double 'www' and not loading when accessing the custom domain in Webflow? The A records and CNAME are correctly set up in GoDaddy.
How can I achieve a blurred border effect on one side of a DIV using Webflow without using inner box shadow or affecting transparency?
Is anyone else experiencing issues with Webflow when uploading multiple custom fonts at once? It seems that now you can only select and install one font at a time, and attempting to upload another without installing causes Webflow to crash.
What is the best way to create this effect using a normal img element in Webflow instead of setting the image as a background and adding an overlay?
Why is the background image on my Webflow site not staying fixed while scrolling in preview mode on Windows 11 and MacBook, despite it being set as a fixed image and there being no code changes or size restrictions?
Why is my Webflow email form giving an error message for a valid email address input?
How can I resolve the issue of an embedded Vimeo background video on my Webflow website not autoplaying consistently in Chrome and Safari?
What are the possibilities and limitations of building custom member features, such as a personal financial dashboard, using Webflow Membership and an external database like Airtable? Can user-specific information be pushed from Airtable to match a specific user's account on Webflow?
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?