Streaming live at 10am (PST)

Lottie animation bug on Safari and iOS Chrome

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
image

You’re welcome :slight_smile:

2 Likes

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 :slight_smile: I’m still trying to fix this bug.

I’m wrong, you’re right! Great news! :smiley:

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?

1 Like

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 :slight_smile:

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?

Hi there

I think using a video and animate it on scroll will not look as good as a lottie file.
The lottie file doesn’t have “frames per second” but vector data, so when you scroll down veeeery slowly, it still looks smooth. On the other hand videos are using fixed frames per second, so there are only 30 images avaible per second and with that your animation will not look as smooth when you scroll down slowly.

I just found this thread and when I change to Canvas, it does shrink.
Did you find a solution for this by any chance?

Where is this option?
Has it been removed?

Having the same problem…

Found the thread, disappointing that there’s no solution to it. Really loved the hamburger menu animation I had going on as well. :frowning:

Hopping on this thread to mention a second bug and third bug. I’ll report on fixes as they happen.

My share link: https://preview.webflow.com/preview/fourstarsmoke?utm_medium=preview_link&utm_source=dashboard&utm_content=fourstarsmoke&preview=4ed0e76aa28f5f8dcb623a386252eb67&mode=preview

Second bug:
My Lottie animation is appearing in the background even though the sections have a background fill added. It’s acting as if the backgrounds of the sections are transparent - but sporadically like is shows through for 1 second then disappears. It’s truly bizarre. No, fix for this yet…thinking it could be related to relative positioning on my section elements.

It looks like this
Chrome on the left, Safari on the right:

Third bug:
Gradients I have fading from Black to Black with 0% opacity are acting as if they fade from Black to White to Black with 0% opacity. This was fixed by deleting and remaking the gradient backgrounds.