TweenMax.to doesn't working

[Yaaaaar]

So, hello everyone. I'm new to all this and i don't know why ball with class "first" isn't moving to left on 2nd click of my button. Would you help me with that, please?

See the Pen JOaoQZ by Yaaaaar (@Yaaaaar) on CodePen.

[Sahil]

Your tweens are inside a function and that function wasn't being called.

 

See the Pen QOVbgp?editors=1010 by Sahil89 (@Sahil89) on CodePen.

 

[Yaaaaar]

I call a function when im clicking on button, that's correct. On first click everything is working correct, but when i'm clicking second time ball that moved to the end does not move to the left. So question is why it isn't moving at second click?

[Carl]

Hi and welcome to the forums.

 

Thanks for the demo.

 

Open up dev tools when your animations runs and inspect the ball.

 

 

You will see that the right value is being animated but you are not seeing any motion.

This is because your first tween is animating the css right value and your bezier tween is animating the css left value.

 

When you run the sequence the second time your ball has left and right styles applied. Animating the right does not affect the position because left is already set.

 

Please see this reduced test case with no javascript

 

Notice in the css I set right:300px; and left:300px; In this case the browser will only honor the left:300px;

See the Pen ZaMGxo by GreenSock (@GreenSock) on CodePen.

 

 

 

 

[Carl]

Try using x and y instead of top, left, right.

x and y use css transforms and you won't have to worry about using 2 properties (left, right) fighting for control of position on the same axis.

Something like:

 

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

 

[Yaaaaar]

I didn't even think about it, thank you very much for the quick response. Problem solved, you guys are awesome!