Share Posted February 14, 2018 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 More sharing options...
Share Posted February 14, 2018 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. 5 Link to comment Share on other sites More sharing options...
Share Posted February 15, 2018 I don't see a jump. Link to comment Share on other sites More sharing options...
Share Posted May 22, 2018 Just ran into this as well, thanks for the solution! 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