On Dribbble, you can find all sorts of animations to practice emulating. Here’s a collection of GSAP-able shoe store-type animations.
And here are some examples of how you can build these seemingly very complex animations – with very little code using GSAP.
What's a "Tween?"
Basics: to and from tweens
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:
backgroundColor. However many of them are simplified like this
y property that handles
Ease and stagger
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.