How to create animated sequences with GSAP

One of the most useful feature of GSAP is the Timeline sequencing tool.

For example, instead of doing this:

gsap.to("#id", {x: 100, duration: 1});
gsap.to("#id", {y: 50, duration: 1, delay: 1});      //wait 1 second
gsap.to("#id", {opacity: 0, duration: 1, delay: 2}); //wait 2 seconds

We can create a timeline:

var tl = gsap.timeline();
tl.to("#id", {x: 100, duration: 1});
tl.to("#id", {y: 50, duration: 1});
tl.to("#id", {opacity: 0, duration: 1});

What is the difference ?

If you want to change the duration of the first tween (duration of 2 seconds instead of 1), you will have to change the delay of all the next tweens if you want to keep them in sync.

gsap.to("#id", {x: 100, duration: 2});
gsap.to("#id", {y: 50, duration: 1, delay: 2});      //wait 2 second
gsap.to("#id", {opacity: 0, duration: 1, delay: 3}); //wait 3 seconds

With the timeline, you don't need to do that. Each animation will play after the previous one ends, automatically.
So if I change the duration of the first one, I don't have to do anything else:

var tl = gsap.timeline();
tl.to("#id", {x: 100, duration: 2});
tl.to("#id", {y: 50, duration: 1});
tl.to("#id", {opacity: 0, duration: 1});

Even better, we can control the timing with the Position Parameter.

Creating the banner

Here are the IDs and Class I used for the animated banner:

First, we have to create the timeline:

var hero = gsap.timeline();

then we change the original position of the image, so it will start from the left:

And we have to set the visibility CSS property to hidden.
To understand why , you must read this quick tip : Removing a Flash of Unstyled Content (FOUC)

We can finally create the animation:

var hero = gsap.timeline();
hero.to("#hoodie", { duration:1, autoAlpha:1, x:0 })

And that's it for the hoodie image. It will move from the left to the right and the opacity will go from 0 to 1.
More about autoAlpha here : CSSPlugin

Staggered animations

Let's take care of the text now. We have 4 text elements, that all share the same class .hoddie-text
And they will all have the same animation.

For the 3D effect, we set the perspective and the rotation:

The following code will make the 4 text elements moving at the same time.

hero.to(".hoodie-text", {
    duration: 2.5,
    rotateX: 0,
    autoAlpha: 1,
    ease: "elastic.out(1, 0.3)"
})

For a better effect, we want to have a short delay between each of them.
We could then create 4 tweens, each one with a different class, it will work fine but it's not very convenient.

GSAP has a stagger property for this kind of case:

hero.to(".hoodie-text", {
    duration: 2.5,
    rotateX: 0,
    autoAlpha: 1,
    stagger: 0.2,
    ease: "elastic.out(1, 0.3)"
})

stagger: 0.2 means that there will be 0.2 second between the start times of each tween.

More info about the Stagger property here : Staggers

It's exactly the same method for the social icons :

hero.to("#hoodie-social a svg", {
    autoAlpha: 1,
    y: 0,
    duration: .5,
    stagger: 0.2,
    ease: "bounce.out"
})

Because we use the Social Icons element, we can't transform each icon individually. So we have to do it with some custom CSS:

#hoodie-social a svg {
    visibility: hidden;
    transform: translatey(-200%)
}

And finally, for the Oxygen logo, we simply change the opacity :

hero.to("#hoodie-logo", { duration:1, autoAlpha:1 })

Only 5 lines of code

The full animation is done with only 5 lines of code:

The full code, in a more readable way:

var hero = gsap.timeline({ repeat: -1, repeatDelay: .5, yoyo: true })

hero.to("#hoodie", {
        duration: 1,
        autoAlpha: 1,
        x: 0
})

.to(".hoodie-text", {
        duration: 2.5,
        rotateX: 0,
        autoAlpha: 1,
        stagger: 0.2,
        ease: "elastic.out(1, 0.3)"
}, "-=.5")

.to("#hoodie-logo", {
        duration: 1,
        autoAlpha: 1
}, "<1")

.to("#hoodie-social a svg", {
        autoAlpha: 1,
        y: 0,
        duration: .5,
        stagger: 0.2,
        ease: "bounce.out"
}, "-=2.5");

The numbers that we have added at the end of some tweens, are the position parameters:

"-=.5" means that the tween will start 0.5 seconde before previous tween ends.
"<1" means that the tween will start 1 second after previous tween begins.

So we can have a full control of when each tween will start. A tween doesn't have to start when the previous one ends.

More info here : Understanding the Position Parameter