GSAP timeline reverse for animation

[dreemhai]

Hello, everyone

 

I have following code and tried to implement make animation using timeline and reverse().

Function reverse() for circle works perfectly but when I try to reverse rotation for box, it seems box not fully reset into the initial position.

Can anyone let me know what the problem is.

This code is same as in 

 

 

https://codesandbox.io/s/gracious-villani-qiczlf?file=/src/App.js

 

 

[GreenSock]

It looks like it's because your useEffect() is getting called multiple times and you're creating several .to() animations that are trying to control the same element at the same time. And keep in mind that a .to() animation uses the CURRENT value as the starting value (when that tween renders for the first time). So let's say you create a .to() animation to rotation 360 and then very soon thereafter, you create another one....

 

Since rotation starts at 0, the first tween locks that in as the start, and on the first render, it moves it to the interpolated value (let's say 12.478 degrees)...and on that very same tick, your duplicate tween renders for the first time and its says "what's the current value?" - it locks that in as the starting value, so in this case that tween will go from 12.478 to 360, thus when you rewind it to the start, it'll end at 12.478. 

 

Of course you should always try to avoid creating multiple conflicting tweens on the same element. 

 

There are two solutions:

1. Make sure you rewind and kill() the previous one before starting the new one:

   useEffect(() => {
     tl.current && tl.current.progress(0).kill();
     tl.current = gsap.timeline()
     ...
   }, []);

    

2. Use a .fromTo() tween so that you can control BOTH the start and the end values:

   .fromTo(q(".box"), {rotation: 0}, {rotation: 360, ...});

    

Does that clear things up? 

[dreemhai]

2 hours ago, GreenSock said:

Since rotation starts at 0, the first tween locks that in as the start, and on the first render, it moves it to the interpolated value (let's say 12.478 degrees)...and on that very same tick, your duplicate tween renders for the first time and its says "what's the current value?" - it locks that in as the starting value, so in this case that tween will go from 12.478 to 360, thus when you rewind it to the start, it'll end at 12.478. 

Thank you very much!
But actually, I dont understand these sentences fully.

Can you explain more details ?

And what is the difference between rotate: 360 and rotation: 360 ?

[GreenSock]

It was always "rotation" in GSAP, but we added the "rotate" alias just as a convenience because some people think in terms of CSS animations. So functionally they are identical.

 

I'm not sure I can explain it any better or differently than I did previously. I even gave an example scenario, so I'm not sure what else to say. Hm. 

 

In short, you were creating multiple animations of the same properties of the same element. The 2nd one rendered after the first one, so when it recorded it's "start" values (the CURRENT ones at that time), it was immediately after the first tween rendered with its playhead slightly moved from the start, thus the second started from there. It's just a logic thing. 

 

I provided two solutions - did those work okay? Were you still struggling? 

[dreemhai]

Thank you !

Your solution worked perfectly for me.

 

But actually, it didnt work even though there is only one tween - rotation in timeline.

See the Pen eYWGeGe by GreenSock (@GreenSock) on CodePen

this is the sample code on Gsap-React, I used.

Do I need to clear timeline or use gsap.fromTo() instead of gsap.to() on the sample code as well ?

[GreenSock]

2 minutes ago, 0xnabeix said:

But actually, it didnt work even though there is only one tween - rotation in timeline.

I don't understand. Are you saying you think that CodePen doesn't work? In what way? It seems fine to me. And it already has the solution in place (rewinding and killing the previous timeline). Maybe I'm missing something.