Is there a simple way to reset a TimelineMax JavaScript object?

Question

I'm having trouble re-initializing a TimelineMax sequence. When the window is resized, I need to revert all the tweens to their default styles and re-initialize them based on the new window size. Is there a simple way to effectively destroy the timeline and start fresh, without manually resetting all the CSS properties?

Answer 1

Depending on what you are trying to achieve, I can suggest two methods.

The first is exactly as you are describing:

myTimeline.pause(0, true); //Go back to the start (true is to suppress events)
myTimeline.remove();

This takes everything back to the way they were at the start of the timeline. You can remove any initialization properties by calling .invalidate() as well.

The second method, I'm adding because it may be worth thinking about...
Rather than completely restarting the tweens/timeline, why not .invalidate() (items stay where they are, just the timeline itself is cleared) and use the tweening method .to() rather than .from(), as you'll get a nicer user experience when everything moves from it's previous position to it's new position rather than completely restarting.

Also, the majority of users don't resize the window. So think about whether or not it's worth it if it becomes a major time consumer.

API/Docs: http://api.greensock.com/js/