Jump to content
Search Community

How to fix stuttering motion on scaled image

KPGS test
Moderator Tag

Go to solution Solved by KPGS,

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

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

Link to comment
Share on other sites

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. 

  • Like 1
Link to comment
Share on other sites

  • Solution

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.

  • 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.
×
×
  • Create New...