Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

How to restart whole timeline?

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

I use GSAP in Adobe Animate. I'm new to GSAP. I am using the demo files to create a basic animation.

Now, after 15 seconds the animation stops, when I hover on the canvas it restarts the movieclips with a tween in it, and they pause when the mouse goes out of the canvas.


I would like to restart the whole timeline / animation instead of just restarting the movieclips. How to achieve this?

Link to comment
Share on other sites

  • 2 weeks later...

I recommend coding the GSAP in TimelineMax and then using the restart function. 

  • Like 1
Link to comment
Share on other sites

Hello skill and Welcome to the GreenSock Forum!


if you do restart() your timeline you can invalidate() all your starting values like this before you restart()



  • Clears any initialization data (like starting/ending values in tweens) which can be useful if, for example, you want to restart a tween without reverting to any previously recorded starting values.


restart() : http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/restart/

invalidate() : http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/invalidate/



  • Like 2
Link to comment
Share on other sites

Hello, reading your answer and the doc link about invalidate( ) i was wondering when to use it (I still don't get it). In my case I trigger an animation on click on a button, let's call it: open_nav.


Do I need to use invalidate( ) if i trigger a button "close_nav" which trigger the same animation but revesed ? I don't know if it's recommended ? required ? a good practice ? And what's the difference with clearQueue ( ) from Jquery then (and when to use it ) ? 


Thx in advance ! :) 

Link to comment
Share on other sites

Hi olivier,


Can I chip in?


I think things are getting a bit mixed up now. You initial question was about restarting the whole timeline. In your last comment you were referring to reversing the timeline. Which of the two behaviours are you after?


- The timeline to jump back to its initial position and play forward?

- The timeline to play backwards to its initial position?


If you are just reversing it as you describe in your last comment then, no, there's no particular reason to invalidate() anything. It's not required, not a particular good practice or anything of the sort. 


As for the clearQueue() from jQuery, I have no idea. Someone else will have to help you there, I have next to no experience with it.

Link to comment
Share on other sites

  • 3 weeks later...

You would only use timeline.invalidate().restart() if you were restarting the whole timeline.


But if your just simply reversing then you don't need to invalidate().


invalidate() is good when you need your whole animation restarted but with cleared starting and ending values.


Like if you were resetting your animation a fresh, and did not want to create new tweens or timeline. But use the same tweens and timeline. This way any previously recorded values can be wiped out when the timeline is reinitialized.


Invalidate is also great when you have other tweens that started before other tweens. But then you want them to restart from where they began. This way the other tweens get played from your original starting value and dont jump back immediately, which would happen if you didn't use invalidate().


Very useful when you need that type of behavior. :)

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.