

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