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!
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!
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
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 Now to play even more with some bodymovin renders to get better quality without gigantic file sizes
Hi @jhighburger, I have the same issue with a lottie animation on scroll, it’s flickering on iOS and Desktop Safari.
Using Canvas mode instead of SVG is a pain for loading / sizing issue, and even not working with my animations (hiding/showing).
The link provided by @GemLight apparently solved your problem, but I can’t find why exactly. Can you please give a little more details ?
I’m experiencing the exact same issue (i.e. Lottie animation strobing on first play on Safari), and when I switch from SVG to Canvas, which others have said was the solution for them, the animation disappears entirely on Safari. Anyone share any insights that might help me fix this?
I also am having sizing issues when switching to canvas. I’m a little lost on how to adjust the size once its in the canvas setting. Do I have to export it differently from AE?
Good news everyone. I figured out how to make the animation work everywhere.
1st step is to make sure you use canvas rendering and not SVG.
Then put your animation inside a div to control size etc…
To prevent the issue where hidden/show interactions prevent the animation from appearing you have to set the hidden/show interactions to each sibling of the animation rather than directly on the parent div.
Finally use a delay in seconds from the animation trigger for your lottie animation. In this fashion, there is never a hide/show interaction applied to the animation and the animation appears as intended.
You can verify that it works here home page. The delay is 8 seconds from page load so be patient.
I had the stuttering problem on a image sequence lottie which was tied to a while scrolling trigger. (Chrome and Firefox Desktop)
Switching to canvas from svg rendering didnt fix right away for me - the animation started automatically, was stuttering or disappeared completely - similar to desciptions above.
I tried to change to Chrome for development and reinserted the lottie animation from the assets into its initial place.
It removed the stuttering for me instantly!
Displays smoothly now on chrome and firefox desktop with canvas renderer.
Now to play even more with some bodymovin renders to get better quality without gigantic file sizes