Group session July 1st

Introduction

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

See the Pen HTML cheatsheet 1 / display types by perpetual.education (@perpetual-education) on CodePen.

Basics: to and from tweens

See the Pen HTML cheatsheet 1 / display types by perpetual.education (@perpetual-education) on CodePen.

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

Ease and stagger

See the Pen HTML cheatsheet 1 / display types by perpetual.education (@perpetual-education) on CodePen.

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!

First timeline

See the Pen HTML cheatsheet 1 / display types by perpetual.education (@perpetual-education) on CodePen.

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

Fine tuning

See the Pen HTML cheatsheet 1 / display types by perpetual.education (@perpetual-education) on CodePen.

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.

Using many timelines and labels

See the Pen HTML cheatsheet 1 / display types by perpetual.education (@perpetual-education) on CodePen.

Group session July 1st