Getting Started with GSAP - continued

Sign in to follow this   Followers 10

Welcome back to our getting started guide. If you haven't read part one, you can find it here.

Let's continue with timelines...

Timelines

Timelines let us create adjustable, resilient sequences of animations. Below is a simple timeline containing three tweens. By default, things are added to the end so they play one-after-another.

// create a timeline
let tl = gsap.timeline()

// add the tweens to the timeline - Note we're using tl.to not gsap.to
tl.to(".green", { x: 600, duration: 2 });
tl.to(".purple", { x: 600, duration: 1 });
tl.to(".orange", { x: 600, duration: 1 });

But what if we want to add a gap or delay in between some of the tweens?

let tl = gsap.timeline()

tl.to(".green", { x: 600, duration: 2 });
tl.to(".purple", { x: 600, duration: 1, delay: 1 });
tl.to(".orange", { x: 600, duration: 1 });

One option would be to add a delay to a tween to offset it's start time. But this isn't hugely flexible. What if we want tweens to overlap or start at the same time?
 

Position Parameter

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

let tl = gsap.timeline()

// start at exactly 1 second into the timeline (absolute)
tl.to(".green", { x: 600, duration: 2 }, 1);

// insert at the start of the previous animation
tl.to(".purple", { x: 600, duration: 1 }, "<");

// insert 1 second after the end of the timeline (a gap)
tl.to(".orange", { x: 600, duration: 1 }, "+=1");

We can use a combination of pointers, absolute times, percentages and relative values to position tweens pretty much anywhere! Tweak the demo below to see it in action.

Want a deep dive into the position parameter? This article covers it in more detail

Special Properties

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!

Timeline Defaults

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});

Controlling your animations

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();

Clients love to make last minute tweaks to animation! Timescale comes in really handy for speeding up or slowing down complex animation timelines without having to change lots of durations and delays.

Callbacks

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
}

Plugins

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!

Some plugins are only available to our wonderful Club GreenSock members, but you can try them all for free on CodePen, or sign up today to use them on your site and support us in our quest to make the web more fun!

Club GreenSock

There are three primary reasons for joining Club GreenSock:

• To get the members-only bonus plugins which can take your animation skills to the next level.
• To get the special commercial license that comes with the "Business Green" level. Learn more about licensing.
• To support GreenSock's ongoing efforts to maintain and enhance the tools. It's a way of saying "thank you" and protecting against common frailties of open source.

Developing your animation superpowers further...

Great job, you've made it all the way to the end of the getting started guide. So what now? Well, as with anything, practice makes perfect! The best way to get proficient with GSAP is to dig in and make some animations!

Further reading

• Getting Started with GSAP and React
• Writing Smarter Animation Code
• Most Common GSAP Mistakes
• Animating SVG with GSAP
• All our Learning articles

Important Links

• Installation guide 
• Documentation
• Cheat Sheet

Starter Templates

• CodePen starter template (core & plugins)
• CodeSandbox Starter template (core & plugins)
• React
• Next
  ...and more framework specific templates on CodeSandbox

Communities

• Our friendly forums are a great place to go if you're stuck.
• The animation at work discord channel is also a great unofficial place to share with and learn from other people.

Inspiration

• Demo collections
• Showcase

Courses

• GSAP 3 Express - Our recommended paid video course.
• GSAP and React