Hello, everyone!
I made a Lottie animation in Webflow and exported to HTML. It works properly everywhere but Safari and iOS Chrome. In these browsers it blinks a lot when the user scrolls down (it’s animated on scroll).
What can I do to fix this bug? Did someone face this bug too?
Thanks a lot!
Alex.
Please at share a published link as outlined in this topics posting guideline. A browser struggling with an animation sounds like a local issue. So sharing your test environment specs can help isolate the issue (device, OS version, browser version).
HI!
Here’s the link: http://uisa.com.br
It will open a landing page that shows the animation.
Thanks!
So that animation looks like it wont work on any device that has a smaller viewport than the animation. It loaded on an IPad but not an iPhone.
But it works properly on Android smartphones.
So there you go. You may want to head on over to Webkit and check for bugs / file a report.
Ok. I will try checking there.
Thanks.
I have the same issue on my website, for some reason it seems like the frames aren’t fully loaded and the animation flicker. Once it is fully loaded it’s alright it also happens on one of your showcase here:
http://worlds-thinnest-smartphone.webflow.io
I need to add this for a product launch and can’t take the risk that it won’t look good on all device, can you get in touch with your team?
Thanks
Same here, runs great on chrome even on a slow pc, but using safari on Mac or any browser on iOS flickers the animation. Really tried everything, even reduced the json file to 1 mb just for the testing and dropped the quality a lot, still flickers.
Any advice? did you managed it somehow to work?
You can chack mine here. https://gab-digital-solutions.webflow.io/
I found the solution!
Change the render option to Canvas
You’re welcome 
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.
That’s great it works for you, but it doesn’t for any of my sites I’m still trying to fix this bug.
I’m wrong, you’re right! Great news! 
Super glad you made me test it again, probably have hit some cache issue the first time I tried.
Does switching to canvas makes your lottie anims shrink in dimensions?
OMG you’re the goat for this one!!! Been struggling with this all day. Thank you!
Changing the render from SVG to Canvas resolves the flickering. But in return the animation has totally weird size properties and doesn’t automatically fit into a div. That almost makes the entire feature half useless.
Any ideas but to manually fiddle around with its size until the animation fits?
Same bug for me here, and the Canvas mode is not a perfect solution as it is not fully responsive : the animation seems to size on page loads, but if a the screen size changes (ex: mobile portrait to landscape) it is resized with weird proportions…
Hi, I have this exact same problem when it comes to using SVG vs Canvas, does anyone have any solutions yet? I’m switching back to video now because it’s just not workable like this, which is such a shame because the animation on scroll is a really cool effect.
Hi Martine,
Here is the answer I got from the Webflow support :
From the solutions presented, the best option is to use the canvas render option since the lottie animation is using complex raster images rather than a vector graphic. Safari is known to not always render SVGs in reliable ways sometimes.
So it means no solution yet, and probably no development from webflow
Question : Are you able to interact with videos the same way we can with Lottie animation ? For me “play depending on scroll position”. If so it could work for me as well.
Thanks !
Thank you for the answer! Who knows there will be some updates someday.
As for the video, that was exactly the idea I had as an alternative to the Lottie but I haven’t figured out how to do something like that. It doesn’t seem to be possible with the options Webflow offers when it comes to ‘animate on scroll’ etc. So I ended up using a Lottie after all and accepting the less responsive qualities of it.
Maybe someone with more coding experience could build a function as such with a video?