SVG animation jumpy

[iamleeadamson 0 Likes (Newbie)]

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

[GreenSock 13,394 Likes (Superhero)]

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. 

[OSUblake 14,112 Likes (Superhero)]

I don't see a jump.

[jknott 10 Likes (Newbie)]

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