Paver Posted April 13, 2021 Share Posted April 13, 2021 Is anyone else experiencing jerky animations with GSAP on latest Chrome (v89)? It's very noticeable on text - looks like it's moving one pixel a time for me (some kind of subpixel rendering issue perhaps?). I have a comparison to a CSS animation in the CodePen which is looking smooth in Chrome. I don't experience the issue in Safari (can't tell the difference between GSAP/CSS in the CodePen). See the Pen ZELxYXj by pavlo-livearea (@pavlo-livearea) on CodePen 1 Link to comment Share on other sites More sharing options...
Cassie Posted April 13, 2021 Share Posted April 13, 2021 Yep, I can see that too. Strangely - the CSS animation is still smooth even if I change the transform to translate3d(0px, -10px, 0px) which is exactly the same CSS transform GSAP is injecting inline... 1 Link to comment Share on other sites More sharing options...
eduardfossas Posted April 13, 2021 Share Posted April 13, 2021 I am, I added the will-change attribute in the css and solved the problem. Edit: But still, I did both, and the css looks better 2 Link to comment Share on other sites More sharing options...
Cassie Posted April 13, 2021 Share Posted April 13, 2021 Yeah, same here - @GreenSock Heads-up, something whacky's going on with chrome. Link to comment Share on other sites More sharing options...
OSUblake Posted April 13, 2021 Share Posted April 13, 2021 Sometimes adding a slight rotation can help with the pixel snapping... and of course adding will-change. gsap.set(".gsap", { rotation: 0.01 }) 5 1 Link to comment Share on other sites More sharing options...
Cassie Posted April 13, 2021 Share Posted April 13, 2021 Interesting that the pixel snapping isn't happening with the CSS version though. I would have expected them to act the same if the elements that are animating have the same properties and and the transform values are the same. Link to comment Share on other sites More sharing options...
OSUblake Posted April 13, 2021 Share Posted April 13, 2021 Yeah, I'm guessing it's because Chrome can detect when a CSS animation is happening, so it can optimize for that. When setting the style inline, it doesn't know anything about what's going to happen next, so it's going to optimize for text legibility, resulting in the pixel snapping. But that's just a guess. 🤷♂️ 1 Link to comment Share on other sites More sharing options...
Paver Posted April 13, 2021 Author Share Posted April 13, 2021 Glad it's not just me Haven't noticed this before but thanks for the workarounds. A little hacky but think I prefer adding the slight rotation as it can just be included in the same GSAP call. I do wonder how it fixes it though 🤔 @OSUblake pixel snapping... that's the term I was looking for! Link to comment Share on other sites More sharing options...
Cassie Posted April 13, 2021 Share Posted April 13, 2021 Yeah, interesting. The CSS version is just automagically being forced onto a new composite layer 1 Link to comment Share on other sites More sharing options...
GreenSock Posted April 13, 2021 Share Posted April 13, 2021 1 hour ago, eduardfossas said: I am, I added the will-change attribute in the css and solved the problem. Edit: But still, I did both, and the css looks better Hm, are you sure? When I added will-change: transform, it looked identical to me. Maybe I'm missing something. Can you please take a screen recording or something that shows the CSS version looking better even when will-change: transform is applied to the GSAP one? And yeah, it's pretty annoying how browsers just change things out from under users in terms of rendering. Using translate3d() is supposed to trigger the composite layering (and it always used to), but now that's apparently not the case in Chrome. They've done this kind of thing before - see this article: I think Blake is right about Chrome trying to be "helpful" 🙄 by snapping to whole pixels when rendering. The key is to force the pixels not to align cleanly with the rows/columns of pixels which can be accomplished by setting a rotation (even a tiny one) or a skewX or skewY. 3 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