Elements getting stuck during animation

[mrjfrcdo]

Whenever you spam click the toggle button the translate animation seems to be getting stuck.

See the Pen GeaPWr by maaaaarj (@maaaaarj) on CodePen

[Carl]

Hi and welcome to the GreenSock forums,

 

Thanks for the demo. Things are actually working as they should.

 

from() tweens animate a property value from the value you specify to the current value.

 

When your demo first loads the x of the boxes is 0% (the current value) so your animation tweens from x:100% to x:0%

 

However while the animation is playing you could click the button when x is 50%, in that case you will animate from x:100% to x:50%

 

If you keep pressing the button quickly it's very likely there will be very little distance between the current x value and the from value... which makes it appear to be stuck.

 

a solution in this case is to use fromTo() where you hardcode both the start and end values like:

 

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

 

 

Another issue is that you were adding new tweens to the end of your timeline on each click. There really isn't any need for a timeline for something like this, so a single TweenMax.fromTo() will work fine.