Leemoon Posted December 10, 2020 Share Posted December 10, 2020 why the text quiver in my animation? See the Pen ZEppVOg?editors=0010 by leemoon123 (@leemoon123) on CodePen Link to comment Share on other sites More sharing options...
GreenSock Posted December 10, 2020 Share Posted December 10, 2020 That's because of the way some browsers "optimize" rendering (ha) by snapping to pixels in some scenarios. It's really annoying, and various browsers have been known to just suddenly change the way their algorithms work. Chrome is the worst offender in my experience. You can solve this by adding will-change: transform on the element BUT that means the browser will basically take a screenshot of the element (rasterize it) at the starting scale, so if you scale UP (like in your demo), you'll notice that it becomes pixelated. Again, none of this has anything to do with GSAP - it's a browser rendering thing. So a solution to the pixelizing is to make sure that you build things so that you're scaling up to 1 (so make your stuff bigger, and start with it at a small scale so that visually you get the same effect but without the pixelizing). 2 Link to comment Share on other sites More sharing options...
Leemoon Posted December 10, 2020 Author Share Posted December 10, 2020 Thanks for your replay! But please take a look at this demo from you. See the Pen MvPXqq by GreenSock (@GreenSock) on CodePen , there's no any quiver. and the different is that i build code with another way i dont know what is the problem i face Link to comment Share on other sites More sharing options...
GreenSock Posted December 10, 2020 Share Posted December 10, 2020 The difference is that there's a "perspective" CSS property set on the container element (and a transform) which essentially makes the browser do a similar thing as what I suggested with will-change: transform (it forces a rasterization at the initial size). This is all about how the browser itself chooses to render things in various scenarios. There are pros and cons to each, of course. 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