Timelines are one of the most important GSAP concepts to wrap your head around. In this article we cover how to position tweens on a timeline to precisely choreograph your motion and then control the entire sequence as a whole.

This handy little parameter is the secret to building gorgeous sequences with precise timing. Take a look at this timeline.

Timelines share most of the same special properties that tweens have like repeat and delay which allow you to control the entire sequence of animations as a whole!

If you find yourself typing out a property over and over again, it might be time for defaults. Any property added to the defaults object in a timeline will be inherited by all the children that are created with the convenience methods like to(), from(), and fromTo(). This is a great way to keep your code concise.

var tl = gsap.timeline({defaults: {duration: 1}});

//no more repetition of duration: 1!
tl.to(".green", {x: 200})
  .to(".purple", {x: 200, scale: 0.2})
  .to(".orange", {x: 200, scale: 2, y: 20});

All the animations we’ve looked at so far play on page load or after a delay. But what if you want a little more control over your animation? A common use case is to play an animation on a certain interaction like a button click or hover. Control methods can be used on both tweens and timelines and allow you to play, pause, reverse or even speed up your animations!

// store the tween or timeline in a variable
let tween = gsap.to("#logo", {duration: 1, x: 100});

//pause
tween.pause();

//resume (honors direction - reversed or not)
tween.resume();

//reverse (always goes back towards the beginning)
tween.reverse();

//jump to exactly 0.5 seconds into the tween
tween.seek(0.5);

//jump to exacty 1/4th into the tween's progress:
tween.progress(0.25);

//make the tween go half-speed
tween.timeScale(0.5);

//make the tween go double-speed
tween.timeScale(2);

//immediately kill the tween and make it eligible for garbage collection
tween.kill();

If you need to know when an animation starts, or maybe run some JS when an animation comes to an end, you can use Callbacks. All tweens and timelines have these callbacks:

• onComplete: invoked when the animation has completed.
• onStart: invoked when the animation begins
• onUpdate: invoked every time the animation updates (on every frame while the animation is active).
• onRepeat: invoked each time the animation repeats.
• onReverseComplete: invoked when the animation has reached its beginning again when reversed.

gsap.to(".class", {
  duration: 1, 
  x: 100, 
  // arrow functions are handy for concise callbacks
  onComplete: () => console.log("the tween is complete")
}

// If your function doesn't fit neatly on one line, no worries.
// you can write a regular function and reference it
gsap.timeline({onComplete: tlComplete}); // <- no () after the reference!

function tlComplete() {
  console.log("the tl is complete");
  // more code
}

Now that you’ve grasped the core concepts, plugins are a great way to boost to your animation superpowers! With just a tiny bit more code and GSAP’s ScrollTrigger, you can hook your tweens and timelines up to scroll…

Make elements Draggable, flickable, or spinnable…

Animate elements along SVG paths with MotionPathPlugin, and even edit those SVG paths right in the browser!