Troubles when animation was killed (with "from" direction)

[Mmagic]

Hello! 

Please open codepen demo. Then while animation is playing try to click "restart" button. And animation will not play again...

If you change "from" method of TweenMax to "to" method, it works as expected.

 

In my case, I want to reinit all the animations on the same object anytime. (with new props, delays, etc)

And I want (in my scripts) do it like this:

 

Delete all animations - then create animations again (with new param`s for example)...

 

Thank you!

See the Pen NOZNxb by mmagic (@mmagic) on CodePen

[GreenSock]

Welcome to the forums, @Mmagic. 

 

I noticed a few problems...

 

In your "restart()" function, you were looping through all the child animations and calling "restart()" on each instance, which basically rewinds them immediately, putting them back at their starting state. When you're using "from()" tweens, that means they'll all be at their "from" values at that point. And then you're creating all the from() tweens again...from those same values! In other words, x is 500 and you're tweening x to 500 (no change). That's why it looks like nothing is happening. It's just a logic flaw in your code. 

 

That's the most common mistake when people use "from()" tweens - they often forget that it uses whatever the current values are as the destination values which can cause logic problems (not a bug in GSAP). Imagine clicking a button really fast - if the user clicks when the current tween is partially finished, the current (destination) values are now different than the originals. It can get messy. Of course you can use fromTo() if you need to specify both starting and ending values. It's totally fine to use from() - it's just important to keep in mind how they work. 

 

Also, if you're trying to clear out a timeline...

//BAD / WASTEFUL:
TL.getChildren().forEach(tw => {
    tw.restart()
    tw.kill()
});

//GOOD:
TL.clear();

 

Also, you do NOT need to reuse timeline instances. It's not wrong/bad, but I often find that it's easier/faster to just create a new instance each time in cases like this. It probably takes more resources to scrub all the old stuff out rather than just creating a new one. Remember, GSAP is highly optimized for speed and it releases things for garbage collection on its own. 

 

Lastly, you could consolidate this code: 

//LONG:
const tween = TweenMax.from(".wrapper", 10, {
  x: 500,
  ease: Power0.easeNone
});
TL.add(tween, 0.5);

//SHORT:
TL.from(".wrapper", 10, {
  x: 500,
  ease: Power0.easeNone
}, 0.5);

 

Happy tweening!

[Mmagic]

Thank you very much for the detailed answer! Now I understand how it works) 

Great platform and site:)