remjx Posted June 23, 2021 Share Posted June 23, 2021 My animation (a small, pulsing circle) is perfectly smooth in Chrome but jerky/laggy/unsmooth in Firefox. I tried the following fixes as some others recommended: Set a small rotation Set force3D: false in GSAP animation Set will-change: transform on css element But it has no effect. Is it still true that Firefox is just bad at rendering animations and the issue is unrelated to GSAP? Are there any workarounds? There are a bunch of other posts in this forum about unsmooth Firefox animations, but I could not find any solutions that solve the problem. Thank you. See the Pen QWpoNJG by geminix (@geminix) on CodePen 1 Link to comment Share on other sites More sharing options...
OSUblake Posted June 23, 2021 Share Posted June 23, 2021 Hi remjx! Firefox is just slow, and there's probably not a lot you can do about that. Unrelated to performance, it's best to let gsap handle the transforms for you. See the Pen zYZVLeR by GreenSock (@GreenSock) on CodePen For percentage x and y, use xPercent and yPercent. gsap.to(".foo", { xPercent: -100, yPerent: 25, x: 20, y: 100 }); 2 Link to comment Share on other sites More sharing options...
GreenSock Posted June 24, 2021 Share Posted June 24, 2021 I'm not seeing the issue. I also didn't see you implementing any of those strategies in the CodePen you posted @remjx. Am I missing something? I have definitely seen Firefox doing pixel-snapping but I'm not convinced it's actually performing poorly. Pixel snapping just makes it LOOK like it's jittery (because of the snapping). Link to comment Share on other sites More sharing options...
Rukasu Posted June 24, 2021 Share Posted June 24, 2021 Hello @remjx, Sometimes I find that just adding a small translateZ, makes it less jittery on Firefox (and sometimes Safari). Does this look smoother ? See the Pen eYvwXgB by sueharaluke (@sueharaluke) on CodePen 1 Link to comment Share on other sites More sharing options...
OSUblake Posted June 24, 2021 Share Posted June 24, 2021 3 hours ago, GreenSock said: I'm not seeing the issue. It only happens on Windows, and makes it appear like the animation is running at very low frame rate. I've tried everything, including using an SVG. The only way to make it look smooth is to use canvas, which isn't an option for most. See the Pen 07b66716541a68c188ba37efa893923e by GreenSock (@GreenSock) on CodePen 1 Link to comment Share on other sites More sharing options...
Rukasu Posted June 24, 2021 Share Posted June 24, 2021 Hello @OSUblake and @GreenSock, nice to meet you ! (Old posts of yours have always helped me, so I feel like I already know you guys already ! haha) 3 hours ago, GreenSock said: I'm not seeing the issue. 14 minutes ago, OSUblake said: It only happens on Windows I was actually able to reproduce it on Mac, but it's only noticeable if you really zoom in. (Pinched to max size with trackpad) Original on the left and translateZ added on the right: demo.mp4 3 1 Link to comment Share on other sites More sharing options...
OSUblake Posted June 24, 2021 Share Posted June 24, 2021 3 hours ago, Rukasu said: Sometimes I find that just adding a small translateZ, makes it less jittery on Firefox (and sometimes Safari). That seems to do the trick, at least for this animation. 2 Link to comment Share on other sites More sharing options...
remjx Posted June 24, 2021 Author Share Posted June 24, 2021 @Rukasu @OSUblake it works! Thank you!!!! For the record, yes my testing was on Windows 10 and Firefox 89. 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now