search

azazdeaz / react-gsap-enhancer

Use the full power of React and GSAP together
MIT License
727 stars 38 forks source link

TweenMax delay is not honored when restart is called #32

Open RobTiu opened 7 years ago

RobTiu commented 7 years ago

Hi, I noticed that when I call restart on a TweenMax controller, the .restart( includeDelay:Boolean, suppressEvents:Boolean ) : *is not honored. This is my tweenmax function:

function animateTextDesign({ target }) {
  return TweenMax.from(target.find({ id: 'textdesign' }), 6, { autoAlpha: 0, delay: 1.9 }); 
}

but when I call this.animateDesign.restart(true, false); the animation does restart but the delay is non-existent. Please let me know if you are experiencing the same issue or if I'm doing anything wrong. Or you could show me another way to restart the animation with the delay.

edit: There is another way I was able to restart the animation but it's pretty dirty. I would prefer if I could use the restart:

this.animateDesign.kill();
this.animateDesign = this.addAnimation(animateDesign);
azazdeaz commented 7 years ago

Hi, the restart call on the controller should have been proxied to the GSAP Animation instance with all the arguments. https://github.com/azazdeaz/react-gsap-enhancer/blob/master/src/Controller.js#L129 If you can't find the problem please create a demo with your issue on codepen.

RobTiu commented 7 years ago

Ok so I've narrowed down where my code is failing. Here is a codepen to illustrate where the restart with delay fails. https://codepen.io/robtiu/pen/YNpKVp?editors=0010#0

I modified your original code pen to include a container component. When the button in the container is clicked, a state variable is changed which the login component detects in componentWillReceiveProps(nextProps) and executes the restart. The delay will be nonexistent here.

If you click on the + on the login component on the other hand, the animation successfully restarted with the delay.

My question is this, how do I get the parent component to restart the animation of its child components? I'm not sure if I'm approaching this problem the right way by using componentWillReceiveProps. I've used refs before but I've been told it's not a good idea to use refs and that I should go with states.