Jump to content


Repeating animation from end state?

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi, I'm fairly new to Greensock and still learning the ropes. 


I'm finding the documentation quite hard to follow, and I am trying to figure out if it is possible to easily repeat an animation with the same parameters but from its end state. 

So say this was the animation object initially passed to the tween : 

animObj = { x : -146 } 

Is there an option to restart the animation, so that next time round x would be -295? 

Thank you so much! 

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums.


Glad to see you taking GSAP for a spin. Sorry to hear your having a bit of trouble. Although its tricky to know just starting out, what you are trying to do is a bit unconventional.


In GSAP repeat means that a tween plays again the same way it originally did. Similarly the restart() method starts an animation again at a time of 0 and plays it back the same way it initially played. Tweens are able to restart and repeat because internally the start and end values are recorded. 


If an object has a left property of 0 and then you create and run this tween

var t = TweenLite.to(object, 1, {left:100});

t will have a left start value of 0, and and end value of 100. Repeating that tween will make the left property change from 0 to 100 each time.


Now you are saying that you want the tween to repeat BUT start at a value of 100 and end at a value of 200. That's really a totally different animation with completely different start and end values. It simply isn't a repeat or restart at this point. 


Knowing only what you have asked for, an animation that plays a second time with different start and end values, this is the solution I would propose:




That demo includes an alternate approach using a timeline. 


There are probably a few other recommendations we could make knowing more about how this is all supposed to work. Does the repeat happen as a result of user interaction (clicking a button), Does the second tween need to repeat the same way multiple times or with different values? That sort of stuff.


Anyway let us know if you need any more help along the way.

  • 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.