TweenMax tips: play(), pause(), reverse() and more with TimelineMax() animations


TweenMax tips: play(), pause(), reverse() and more with TimelineMax() animations

Some days ago I've talked about TimelineMax, a simple but powerful tool offered by TweenMax library useful to create stunning animations with a "timeline approach".

Today I want to talk about some more functionalities that this class provides us, tips that could help you to have more control on your animations like a master. Let's start!


paused: true param

As I explained before, a TimelineMax instance is a container for your tweens and it simply start to run when you declare it and add tweens to it. Sometimes you just want to declare the timeline but don't autostart it, maybe because this TimelineMax instance is self-generated by a functions or because you want to wait before launch it. In this case you can use the paused parameter:

var timeline = new TimelineMax({ paused: true });  

.play()

With the .play() method you can simple start your timeline animation. Let's suppose you have declared a paused timeline and now you want to play it: .play() is the right way to launch it.

// declare timeline
var timeline = new TimelineMax({ paused: true });

// after 5 seconds play it
setTimeout(function(){  
    timeline.play();
}, 5000);

.pause()

What about set to pause our timeline? Like the name explains itself, we can use .pause() on our TimelineMax instance to pause it.

// declare timeline
var timeline = new TimelineMax({ paused: true });

// after 5 seconds play it
setTimeout(function(){  
    timeline.play();
}, 5000);

// after 1 second that it was start, pause it
setTimeout(function(){  
    timeline.pause();
}, 6000);

.resume()

After pausing a timeline, it's time to let it continue. This simple task is made by .resume().

timeline.pause();

// after 1 second that it was paused, resume it
setTimeout(function(){  
    timeline.resume();
}, 1000);

.reverse()

We love rewinds. Everyone love it. Sometimes could be great replay our animation backwards and create a time machine effect. The .reverse() function can do the job.

// declare timeline
var timeline = new TimelineMax({ paused: true });

// after 5 seconds play it
setTimeout(function(){  
    timeline.play();
}, 5000);

// after 10 seconds that it was start, reverse it
setTimeout(function(){  
    timeline.reverse();
}, 10000);

.timeScale()

This method could be very useful if you want to change the duration time of your animation. For example, your timeline is 2 seconds long, but you want to double its time to let it run more slow: .timeScale(2) is the solution, where the passed parameter is the scale of the real time.

// half time duration for our timeline
timeline.timeScale(0.5);  

With this post I wanted to get you even closer to the TweenMax world to explain you the power of GSAP. TimelineMax has a lot of more functions and you can discover more on the official docs here.

Hope you enjoy it, for every question or integration please drop a comment below!



Daniele Petrarolo

Daniele Petrarolo

http://www.danielepetrarolo.com

In love with #JavaScript, #PHP and #Python / Web Developer / There's no place like 127.0.0.1.

View Comments