dazzafact Posted March 10, 2022 Share Posted March 10, 2022 Hello, I'm wondering how to undo the "Reverse()" method. Or is this intended for the entire gsap instance? i only want to use Reverse() once for one Object. Resume() does not reset "reverse()" tl =gsap.timeline() tl.reverse() tl.fromTo('.rectangle', {opacity:1,scale:2,rotate:0},{ duration: 4, opacity: 1, rotate: '-360', scale:0 },'>') tl.resume() tl.fromTo('.rectangle', {opacity:1,scale:2,rotate:0},{ duration: 4, opacity: 1, rotate: '-360', scale:0 },'>') Link to comment Share on other sites More sharing options...
mvaneijgen Posted March 10, 2022 Share Posted March 10, 2022 I've uncommented some of your code, because I'm not sure what it is doing. What I have now is that the animation scales to a factor of 2 and (rotates from the scale it is now eg 1), then the second animation scales to 0 and rotates and I play the animation in reverse from the very end of the hole animation See the Pen gOXVWeW?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen 1 Link to comment Share on other sites More sharing options...
dazzafact Posted March 10, 2022 Author Share Posted March 10, 2022 Now I've made the code a little clearer. As already written, I want to use the "Reverse" method only for 1 tween. But the Reverse() affects all subsequent tweens. I can't stop it with "Resume()". So, you just changed the Paramters in your example (360,-360). That not that problem. I want to keep it dynamic, without touching any Paramters to simulate reverse. In some case you have unknown Paramters, so it has to do the job automaticlly Link to comment Share on other sites More sharing options...
Solution dazzafact Posted March 10, 2022 Author Solution Share Posted March 10, 2022 hey, this is very cool. i even found a better solution to simulate reverse, using negative delay with yoyo(): delay:-4 That makes the use of reverse() unnecessary Would be very nice to integrate this as a feature in the next Version of GSAP. For example: "yoyoStartHalf:true" , to simulate a reverse effect.😄 tl.fromTo('.rectangle', {opacity:1,scale:2,rotate:0},{ duration: 4, opacity: 1, delay:-4, yoyo:true, repeat:1, rotate: '-360', scale:0 },'0') See the Pen MWOMvdX by dazzafact (@dazzafact) on CodePen 1 Link to comment Share on other sites More sharing options...
mikel Posted March 10, 2022 Share Posted March 10, 2022 Hey @dazzafact, There are many ways to re-use a complex timeline: .play() and a position parameter, .play() and a label positioned where you want or tween this timeline with many options ... See the Pen KKyOXBB?editors=1010 by mikeK (@mikeK) on CodePen The world is colorful ... Mikel 1 Link to comment Share on other sites More sharing options...
dazzafact Posted March 10, 2022 Author Share Posted March 10, 2022 57 minutes ago, mikel said: Hey @dazzafact, There are many ways to re-use a complex timeline: .play() and a position parameter, .play() and a label positioned where you want or tween this timeline with many options ... The world is colorful ... Mikel Thanks, but how you simulate the reverse thing with just Labeling? Cant understand your example. ...in my case i use two Tweens (foward,backward). Link to comment Share on other sites More sharing options...
mikel Posted March 10, 2022 Share Posted March 10, 2022 Hey @dazzafact, Sorry, label is not a solution for your case. Another is tl.reversed(); // sets the orientation to reversed tl.play(); See pen above. Mikel 1 Link to comment Share on other sites More sharing options...
GreenSock Posted March 10, 2022 Share Posted March 10, 2022 Minor correction... tl.reversed(); // reports true/false indicating if the animation is currently reversed tl.reverse(); // reverses the animation (always goes backwards) tl.play(); // plays the animation FORWARD tl.resume(); // resumes in whichever direction it was last playing in 2 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now