Jump to content
GreenSock

dazzafact

How to reset Reverse() ?

Go to solution Solved by dazzafact,

Recommended Posts

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

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

  • Like 1
Link to comment
Share on other sites

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

  • Solution

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

  • Like 1
Link to comment
Share on other sites

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

 

  • Like 1
Link to comment
Share on other sites

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

 

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

  • Like 1
Link to comment
Share on other sites

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

 

  • Like 2
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×