Streaming live at 10am (PST)

Lottie animation flickering/strobing on scroll

Hey friends, so I finalized an early mockup of how my boss wants each element to work on our company site rebuild, all the content is placeholder but HERE is a link to the current site.

What I am having trouble with is the “flickering” when I go to preview on mobile, using the Chrome app on my iPhone XR. Building the current site above, I hadn’t put much of any thought into it for mobile optimization, but HERE is that site published if you want to view on mobile… it’s rough.

I decided to go feature-by-feature and rework it for mobile and starting with this time-lapse Lottie animation. I cannot seem to figure out why it is fluttering/flickering on mobile scroll, yet Chrome on desktop shows no hiccups. Same with the sticky working on desktop, sans on mobile… Hopefully y’all in here may have some insight into this issue, thanks for any tips, help, or feedback on my progress so far!


Here is my public share link: LINK
(how to access public share link)

Bumping just in case anyone might have a solution to this, doing more testing today, it appears to still be happening on any browser I’m using, Chrome / Firefox / Safari on my iPhone XR iOS 13.2

Idk if anyone’s ran into this same issue or if something I’m setting on the backend isn’t working correctly, but any assistance would be super helpful!

HERE is the link to the page I’m working with currently, it won’t look right on desktop but mobile view is what I’ve been sticking with for this hurdle.

I’m having this problem on mobile as well as Safari desktop. Very annoying. I found some similar topics on the forum but nothing has solved it for me. Most annoyingly, in Safari on desktop, it stutters through its first play (I have a Lottie set to trigger on hover) but then plays fine on repeated hovers. But on mobile, where it triggers on page load, it’s very stuttery. Any ideas magical Webflow forum?

Editing To say I’m now looking for ways to disable the animation for the problematic browsers (Safari) if anyone has any ideas on that. Thanks!

1 Like

So I’m not sure if it’ll work for desktop browsers giving that issue, I know it was kind of hit-or-miss for me on Firefox, but I changed the Lottie animation I was dealing with from rendering as SVG to rendering as Canvas.

In all honesty I don’t really know what that change makes, I know there’s a difference because I had to resize it to some degree in it’s section, but that fixed the flickering for me on mobile. I have noticed it takes longer to load, there’ll be just a blank empty space where the Lottie is supposed to be for a few moments but then it appears.

Maybe could be fixed with a little extra content above to give load time while the users scroll? Definitely still looking forward to some help from anyone who knows what’s happening :sweat_smile:

here is why!

  • Render mode (preset toggles) — Switch the animation rendering mode. The default is SVG . SVG is great for vector animations. Canvas is good for rasterized layers most common in image sequences. Toggle the renderer if the animation isn’t playing correctly in the selected mode.

That definitely was the issue, thank you so much for your help! I thought this post had succumbed to the depths of the forgotten, but thank you so much for your response :pray: Now to play even more with some bodymovin renders to get better quality without gigantic file sizes :sweat_smile: