Bams Posted December 8, 2020 Share Posted December 8, 2020 Hi 🖐 I know my problem is due to Angular or TS but I can't figure out why my simple animation is not smooth. At the start it looks ok but in the last frames, it's almost step by step If someone has an idea.. 🙏 The code is pretty simple though See the Pen abmmzpm by _bams (@_bams) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted December 8, 2020 Share Posted December 8, 2020 Hey Bams. This looks like it's simply due to the fact that you're asking the elements to move a short distance over a long period of time. You can't animate things less than a pixel at a time. So if those last 3 or 4 pixels take a second or two to animate over, you're naturally going to perceive a jump. To fix it make the duration shorter. Or use a different ease that doesn't have as much out-ness to it. 2 Link to comment Share on other sites More sharing options...
GreenSock Posted December 8, 2020 Share Posted December 8, 2020 50 minutes ago, ZachSaucier said: you can't animate things less than a pixel at a time. That's true for some properties, but if you're animating transforms like "x" and "y", most browsers do sub-pixel rendering. If you try to animate "top" and "left", though, I think browsers only render those at whole pixel values which will lead to those jerky animations like Zach pointed out. Since you do appear to be animating transforms, I'm a bit confused about why you're seeing that behavior. I'm pretty confident it's unrelated to GSAP, but it's tough to troubleshoot blind. The demo you provided doesn't function at all - can you provide a minimal demo that shows the issue please? Feel free to use codesandbox or something. One trick I've seen work with forcing browsers to render things more smoothly is to add a slight rotation. It's like that refuses to let the browser run its "optimized snap-to-whole-pixels" rendering routines. Another thing to try is set force3D: false or force3D: true. 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