Notice: Undefined index: order_next_posts in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 194

Notice: Undefined index: post_link_target in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 195

Notice: Undefined index: posts_featured_size in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 196

How to create intro animations with TimelineMax

Discover some code-based GSAP animation sequencing tips and tricks, as used by DS Signature Art

Discover some code-based GSAP animation sequencing tips and tricks, as used by DS Signature Art



1. Set up a timeline

GreenSock Animation Platform, or GSAP, is a very powerful and user-friendly animation library. One of its most powerful features is Timelines. They work like regular tweens, but give you the ability to sequence animations. The entire intro animation of Signature Art is controlled by a single TimelineMax instance. If you have ever used TweenMax, TimelineMax is easy to pick up. For docs and examples, check out

// create a new timeline    
var tl = new TimelineMax();    
// animate to 100 over 0.5 seconds, 0.5, {bar:100}); 
// after that, animate to 200 over 0.25 seconds, 0.25, {bar:200});    

2. Add labels

Even though Timelines are powerful, it can still be difficult to keep long sequences manageable as more and more parts are added. Using labels from the get go is a good way to combat this. Labels are strings positioned at a particular time. Subsequent tweens can then be positioned relative to a label. You can also position other labels relative to a label, giving your animation sequence a semantic structure.

// add 'ds-logo-in' label at 0.5 seconds    tl.add('ds-logo-in', 0.5);    
// tween light.intensity to 1.0,starting at that label, 0.5, {intensity:1.0}, 'ds-logo-in');    // … a bunch of other tweens
// add 'ds-logo-out' label 10 seconds after 'ds-logo-in'    
tl.add('ds-logo-out', 'ds-logo-in+=10'); 

3. Add callbacks to timelines

Other than tweens and labels, you can also add callbacks to a Timeline. Callbacks are functions that will be triggered at a particular time (or label). This way, you can execute any code in sync with the animation sequence. The DS Signature Art site made use of this quite extensively for the intro animation. Callbacks control playback of video and SVG content, as well as states of the WebGL particle system.

// add a function to the timeline
// it will be executed on the 'title_1' label    tl.addCallback(function() {    
// show the relevant container
$contentDivs[0].style['display'] =     'block';    // play the intro title svg;    
}, 'title_1');

4. Think in proportions

Without a visual reference, tuning animation durations from 0.3 to 0.25, and then back to up 0.35 can quickly become a headache. Instead, work here on DS Signature Art started with animations lasting 1.0 second, while timing other animations proportionally. The timeScale of the main Timeline was then used to adjust the overall timing. This timeScale property can itself be tweened, which is akin to adding easing to the entire sequence:

// set the time scale to half of normal speed    tl.timeScale(0.5);    
// tween the timescale of the main timeline    // from 0.5 to 2.0 over 5 seconds
TweenMax.fromTo(tl, 5, {timeScale:0.5}, {timeScale:2.0});

5. Setters and getters

TweenMax can animate any numeric property. JavaScript has syntax to bind functions to a property of an object, which are then called whenever the value is read or set. Combining these two enables you to define custom logic that is controlled by a number, and use TweenMax to animate that number. This is a great way to keep the main Timeline clutter free, while opening up a ton of new possibilities.

// define property 'bar' on object Foo    Object.defineProperty(Foo.prototype,'bar',{    // this function is called whenever is set
// like = 5    
get: function() {    
return this._bar;    
// this function is called whenever is read    
set: function(v) {    
// define any custom logic here
this._bar = v;    

6. Link the library!

If you are keen on delving even further into GSAP’s TweenMax and TimelineMax by following the coding techniques covered here, you will of course need to add the latest library to your pages first. Greensock provides the main framework freely, while subsequent plugins will require subscription access, so TweenMax.min.js can be downloaded or simply linked via CDN within your document <head> or before your closing </body> as follows:

<script src=""></script>