GSAP timeline intro

Here are a few “tweens” that run simultaneously on page load.

You can animate pretty much anything. CSS properties are almost all the same but in camelCase: background-color = backgroundColor. However many of them are simplified like this y property that handles transform: translateY().

The default “ease” for tweens is `power1.out`, but you can check out different options using the GSAP visualizer.

If you have a list of elements, you can stagger them in using the stagger property. So satisfying!

Timelines allow you to compose tweens together. You can create little timelines and add them to bigger timelines too.

By default, the timeline will just run each tween one after another. However, you’re going to want more control over that. What if you want one timeline or tween to start in the middle of another? You can nudge these things around and get them all fine-tuned.

Also, note the timeScale(multiplyBy) function. You can slow it way down myTimeline.timeScale(0.3) and get it really fine-tuned. Then you can speed it back up again. This is also really helpful for managing the bigger picture. You wouldn’t want to have to go in and change 20 things by 0.1 every time you change things. So, make sure you take advantage of this setting.