Lottie animation flickering/strobing on scroll

[paulettepaillette]

Tell us about your environment Mac OS Catalina 10.15.7

• Browser and Browser Version: Firefox 98.0.2 (64 bit) Chrome 99.0.4844.83

• After Effects Version: After Effects 22.2.0

What did you do? Please explain the steps you took before you encountered the problem. I created an animation with after effect and lottie which works perfectly on scroll on Chrome and Safari, but not on Firefox. The rendering is in svg and it has to be, because I added click interaction which is not possible in canvas I think.

What did you expect to happen? I would like the same smooth animation in Firefox as in Chrome

What actually happened? Please include as much relevant detail as possible. Now, in Firefox the animation is glitching, strobing, it's not good at all.

Please provide a download link to the After Effects file that demonstrates the problem. You can see the issue here, in the third section (the box animation) : https://dev.bklt.fr/grace/

[bodymovin]

hi, do you have a reduced example to check? There are several things happening at the same time on the page and it's hard to identify the problem

[paulettepaillette]

Sure : https://dev.bklt.fr/test/new.html The json is heavy so it takes time to load. I have to try to optimize my images... But other than that, once the animation is loaded, it works fine on Chrome but not on Firefox.

[bodymovin]

thanks, it looks like Firefox is having a hard time keeping the framerate to hide and show frames when scrolling. I'm not sure there is a solution, but maybe using smaller (or also lighter) pngs might make a difference.

[paulettepaillette]

Thanks for your answer. I tried to optimized my images, now the json file is 2 times less heavy, but the issue is still there. Is there nothing I can do to get Firefox to handle my animation? There is an example of the code I used in case it helps: https://codepen.io/akapowl/pen/wvJOMdE/96ec6e6dadf7b73d11e38cda125d8920