search

airbnb / lottie-web

Render After Effects animations natively on Web, Android and iOS, and React Native. http://airbnb.io/lottie/
MIT License
30.58k stars 2.87k forks source link

Chrome vs Safari performance #2709

Open ivg-design opened 2 years ago

ivg-design commented 2 years ago

Hi there, so I have this animation that consists of text animators that spew out random numbers ever other frame and flow along paths.... (see the zip attached) and the issue is that in chrome the animation chuggs while in safari it is buttery smooth... (normally its the opposite - but that is mainly a mask issue) I am not sure what is causing it in this case... - any thoughts or pointers? I am kinda stuck.... Code Scene.json.zip

bodymovin commented 2 years ago

hi, do you have a link online where I can check the animation running?

ivg-design commented 2 years ago

sorry - i just test it locally with a demo export - here it is - Code Scene.html.zip

ivg-design commented 2 years ago

@bodymovin any insights?

bodymovin commented 2 years ago

Do you have a link I can test instead of a zip?

ivg-design commented 2 years ago

no problem - here's a link - https://lottiefiles.com/share/ppgavfgp - does that work?

ivg-design commented 2 years ago

Hi Hernan - have you had a chance to look at the lottie?

ivg-design commented 2 years ago

@bodymovin whenever you get a chance - please have a look at the file...

bodymovin commented 2 years ago

Hi, it's hard to debug but it seems that Safari is executing the custom random function much more efficiently that Chrome. There is an extra overhead on performance on lottiefiles that seems to come from clarity.js Testing it isolated, performance is better on Chrome. Have you tried running it outside of lottiefiles? But anyway, expressions on text force the text engine to recalculate changes and that costs a lot of js cycles. On top of that, the random function, since it's seeded, is not as performant as the native js random method.