Jump to content
GreenSock

Bams

Angular/Typescript > Jagged animation on basic tweening

Recommended Posts

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.. 🙏

 

ySM8mv0DMU.gif.87049d9a15e872319b41a567155f6d1a.gif

 

The code is pretty simple though

 

 

See the Pen abmmzpm by _bams (@_bams) on CodePen

Link to comment
Share on other sites

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.

  • Like 2
Link to comment
Share on other sites

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.  

  • Like 1
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×