Lottie is making my browser crash

Hi everyone,

I’m using a lottie on my site and it looks great + the client loves it.

The only issue (and a big one at that) is that it pretty much breaks the browser. When the lottie is in view it glitches and almost makes the browser crash. Tested on:

  • Mac: Chrome & Safari
  • iPhone: Safari

You can see the animation on the homepage hero section of a site I’m working on here:

Is there any way around this? Or are lotties just not meant to be used full screen?

Thanks,

Jake

I tested on my Mac, (Safari, Chrome, iPhone) and they all worked on my end. When you tested did you try incognito or standard? Maybe you’re having a browser plug-in conflict?

It’s more so Safari on mobile that I’m getting the issue. Once I scroll past the hero section and work my way further down the page, the whole page becomes buggy and slow to respond to scroll. I changed the render from SVG to Canvas in Webflow which has helped a bit, but still buggy…

Yeah I just noticed that too. It seems like as you scroll the top section (with animation) that isn’t viewable is still slowing it down as if it’s kind of behind the current page scroll. I think that in development you’d want to somehow turn the animation off or to be dropped off after the scroll past it happens (if that makes sense).