Lottie and DotLottie Animations Crashing Webpage on Android Mobile

Design help Animations & Interactions
1

Hello,

We are in the final stages of launching a major website redesign and have encountered a major bug. We have built lightweight DotLottie animations for much of our site to illustrate a SaaS product - however, these files are crashing in Android Mobile browsers. We do not have this issue on iOS or on desktop on both Mac and PC.

We either have two options as I see it:

  1. Input custom code to prevent these specific animations from loading in mobile views. I’m not talking about hiding this element from displaying on mobile. They still load and cause a crash in this configuration. I’m talking about preventing these JSONs from loading entirely on all mobile browsers.

  2. Option two would be to prevent whatever is causing this crash. We have a high volume of these images, which has not posed a challenge for the web - but could be the source of the issue for mobile. I doubt that this is possible.

Any help that the Webflow community could offer would be amazing.

Thank you,

Ron

2

Other people will discover this post. And based on the fact there are a few other questions with no solution, we can give the community the answer that you may be looking for:

To eliminate Lottie animations on mobile, place this before the body tag:

document.onreadystatechange = () => {
    if (document.readyState === "interactive") {
      if (window.innerWidth < 768) {
          const allAnimations = document.querySelectorAll('.bodyclassname');



allAnimations.forEach((element) => {
              element.parentNode.removeChild(element);
          });
      }
    }
}
1 Like
3

@FDRon this didn’t work for me, and unfortunately my page keeps crashing on mobile.

Super frustrating.

It’s like it works for a minute and eventually the page sort of blinks and seems to refresh and then crashes. Any other suggestions?

4

Been a while, but I’ll comment none the less, since it works for me. Wrap the code in <script>[code]</script> tags, place it in the head of your page or website in settings. Change the .bodyclassname in the code to something like .no-lottie-mobile and add that class to your lottie object in Webflow