smooth back and forth (reciprocating) motion question

[kremzeek]

Originally I posted the question here: 

https://stackoverflow.com/questions/61199816/using-keyframe-animation-to-smoothly-change-margins-of-images-to-show-back-and-f

 

The gist of it is - I'm new to Greensock and want to see if the reciprocating motion seen in the codepen (css animation) can be 

improved using Greensock - ie) no jitters  - all smooth...?

 

Thx

See the Pen LYNzYOm by cw132 (@cw132) on CodePen

[ZachSaucier]

Hey kremzeek and welcome to the GreenSock forums! You're going to love GSAP  

 

The issue is primarily with the property that you're animating - margin. It's not a performant thing to animate because it causes reflow, repaint, you name it  You should stick to translations instead as much as possible. In GSAP you can just use the x property.

 

However, part of the issue is simply the distance that you're moving it (small) over the duration (fairly long). Elements can only be moved in 1 pixel increments so it will be jumpy to some degree even if you're using translations. 

 

I'm not sure what your end goal is (happy to help if you do) but here's a demo based on your demo:

See the Pen rNeGNRY?editors=0010 by GreenSock (@GreenSock) on CodePen

[PointC]

Hi @kremzeek 

 

Welcome the the forum.

 

I'd echo Zach's advice and animate x instead of margin on this one. Even using sub-pixel rendering by setting autoRound:false will still yield a fairly twitchy result at that duration.

See the Pen 702379770e57acbfc6007736611bb767 by PointC (@PointC) on CodePen

 

Happy tweening.

 

[kremzeek]

Thank you!  I'm going with Zach's advice and trying out the x instead of margin.