Jump to content


SVG animation jumpy

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I am animating svg elements onto the screen with a simple opacity tween, however the elements look like they jump left 1px at the end of the tween, is there some properties I need to set to allow the SVG elements to tween on smoothly and without this weird jump?


thanks in advance

See the Pen YexaMy by iamleeadamson (@iamleeadamson) on CodePen

Link to comment
Share on other sites

That's pretty weird, but believe it or not it's totally unrelated to GSAP. It seems like you've got an edge case with your artwork that exposes a rendering issue in the browser when it reaches exactly opacity:1 and the browser snaps it into a different state. The solution is to animate to an opacity of something like 0.99 instead of 1 so that the browser doesn't do that weird snapping thing with the way it renders it graphically. So you could do a fromTo() tween that goes from opacity:0 to opacity:0.99 for example. 

  • Like 5
Link to comment
Share on other sites

  • 3 months later...

Just ran into this as well, thanks for the solution!

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