Animation doesn't return to the beginning after the second click

[chevohin 0 Likes (Newbie)]

Hi guys, I'm new here, I'm pretty sure my question was discussed before but unfortunately i couldn't find any information.

 

I have a simple animation that happens on click.

Idea is that when I click on the snowman, his hands should go up and then back down.

 

If I click on the snowman once and wait till animation finishes, it is absolutely okay. After that I can click on the snowman again, and it will be okay.

 

But when I click, animation starts and I click again before animation finishes, snowman's hands stop in some place and don't get back in their initial position. New clicks don't help, only page restart returns his hands back down..

 

I don't understand why does it happen?

What are the best ways to prevent this behavior?

See the Pen abvByzq by nikkishitt (@nikkishitt) on CodePen

[ZachSaucier 7,152 Likes (Superhero)]

Hey chevohin and welcome to the GreenSock forums! Good question.

 

The answer is that each time you click, you're creating a new animation. And the tweens in that animation are relative, meaning that they go from the current value to the provided value. So when you click mid animation, it uses the current value (instead of the starting value) as the new starting point and thus it isn't what you're expecting.

 

To fix that issue, there are several solutions. Potentially the best is to create an animation outside of the click event and use control methods inside of the click event to manipulate it. Here's an example of that:

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

 

You could also use .isActive() and an if statement to prevent the jumping.

if(!snowmanHandsUpTl.isActive()) {
  snowmanHandsUpTl.play(0);
}

Another alternative is to use .fromTo() tweens which enforce a particular start value with overwrite: 'auto' in order to kill off the previous tweens but that's less performant and not necessary here.

 

Note that I'm using GSAP 3 formatting.

 

I think you're really enjoy and benefit from my article on tips to animate efficiently.

 

Let us know if you have more questions. I'd love to see the end result of what you make!

[chevohin 0 Likes (Newbie)]

Hey Zach, thanks for your detailed answer with several options!

This time I will use the first one but also i'll take the second one into my consideration.

 

I see how you changed my code using defaults to make it more efficient.

I will definitely read your article, bro.