Lottie animation bug on Safari and iOS Chrome

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.

Has anyone resolved this issue in 2021?

There is NO canvas button that I can find and my ‘lottie’ lags like crazy on Safari… Works on chrome and Firefox, but Safari strikes again and again as the culprit…

Reached out to all avenues, Discord, Airbnb team, Lottiefiles team, Github posted an issue… I have no where to go to figure this out!

Please help!

Try site on Safari here : https://lottie-test-f146f3.webflow.io/

We exported Legacy method as well here : https://lottie-test-f146f3.webflow.io/legacy-test

Hi - so regarding strange Lottie behaviour in safari - i have encountered it many times - the problem is how Safari deals with rendering certain things - it is NOT a webflow issue but a Safari issue. The way to get around it is somewhat time consuming but most importantly it is doable. What you have to do is basically troubleshoot the lottie until you find the problemating portion of your animation that gives Safari the hiccups… You have to open up you AE project and then start exporting it layer by layer - first your export one and test if it works well, then add the second one, export, test and so on… Eventually you will arrive to the problematic layer and then you figure out how to do it differently to make sure it works…

In my experience extensive use of gradients and masks is what gives Safari the most trouble… so as a first step I would remove all masks, export, and see how it improves things and then see if you can get around it somehow else