How to fix stuttering motion on scaled image

[KPGS 1 Likes (Newbie)]

Hello,

 

I'm new to GSAP (and Codepen as well) and trying to learn as I go. I'm having some issues with stuttering motion on images when they are scaling and moving. Hopefully the Codepen I posted will show the issue.
Please let me know if I need to post more information.
Any help would be greatly appreciated. Thank you!

 

Kevin

See the Pen zopEee by kp1111CodePen (@kp1111CodePen) on CodePen

[GreenSock 8,117 Likes (Superhero)]

It looks like you're animating the "left" property which browsers always snap to whole pixels. That's what gives it that jerky feel. GSAP is setting the values properly, of course, but the browser won't allow sub-pixel rendering for those. It's much better to animate the "x" property (which is like transform:translateX()) because not only is that cheaper for the browser to animate (it doesn't affect layout), but it can also do sub-pixel rendering on it. 

 

Just beware that "x" isn't the same thing as "left" (though both affect horizontal movement). "x" describes the offset from the normal position in the document flow, whereas "left" is more like an offset from its offsetParent. You might want to read up on CSS transforms to more fully understand. 

[KPGS 1 Likes (Newbie)]

It looks like you're animating the "left" property which browsers always snap to whole pixels. That's what gives it that jerky feel. GSAP is setting the values properly, of course, but the browser won't allow sub-pixel rendering for those. It's much better to animate the "x" property (which is like transform:translateX()) because not only is that cheaper for the browser to animate (it doesn't affect layout), but it can also do sub-pixel rendering on it. 

 

Just beware that "x" isn't the same thing as "left" (though both affect horizontal movement). "x" describes the offset from the normal position in the document flow, whereas "left" is more like an offset from its offsetParent. You might want to read up on CSS transforms to more fully understand. 

 

Thank you so much! I'll try that and see what happens. Really appreciate the help.

[cekvenich 4 Likes (Newbie)]

I would try translate for smooth.