Jump to content
GreenSock

Getting Started with GSAP - continued


| GreenSock
14778

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 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?
 

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

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

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.

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!

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!

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.

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

Important Links

    Starter Templates

    Communities

    Inspiration

    Courses

    • Like 1

    Get an all-access pass to premium plugins, offers, and more!

    Join the Club

    Have you exercised your animation superpowers today? Go make us proud and tell us about it.

    - Team GreenSock



    User Feedback

    Recommended Comments

    There are no comments to display.



    Create an account or sign in to comment

    You need to be a member in order to leave a comment

    Create an account

    Sign up for a new account in our community. It's easy!

    Register a new account

    Sign in

    Already have an account? Sign in here.

    Sign In Now

    ×