Thread by @jh3yy, Want to bring your creations to life? Used CSS animation and want [...]

Want to bring your creations to life?

Used CSS animation and want to try JavaScript animation?

Have you tried @greensock?

This SVG Hi-fi stack was brought to life with GSAP!

Let me show you how in this thread

Sound on

Before we dig in. This is a high-level look at the GSAP API. It's hard to go in-depth on each topic in a tweet

The aim is to get you comfortable looking at GSAP

Then you'll be able to go off, dig into the docs, and bring your own creations to life!

Let's dig in!

Before we dig in. This is a high-level look at the GSAP API. It's hard to go in-depth on each topic in a tweet The aim is to get you comfortable looking at GSAP Then you'll be able to go off, dig into the docs, and bring your own creations to life! Let's dig in!

1. Set the scene

Drop the SVG onto a page. At this point, we update the SVG markup to add classes for things that we want to animate/style. For example, the speakers

CSS is used to size our SVG and control color.

https://codepen.io/jh3y/pen/rNedeaz via @CodePen

1. Set the scene Drop the SVG onto a page. At this point, we update the SVG markup to add classes for things that we want to animate/style. For example, the speakers CSS is used to size our SVG and control color. https://codepen.io/jh3y/pen/rNedeaz via @CodePen

2. Our first tween

Use "to" to tween the scale of the tweeters on the speakers to 1.1 with a duration of 0.2 seconds

We can pass a class, an element reference, object, etc. as the first param. Here we use the ".tweeter" class.

https://codepen.io/jh3y/pen/XWdEdYY via @CodePen

3. Repeat && Yoyo

That's great but we want the tweeters to keep bouncing the scale.

We can use "repeat" and "yoyo" to achieve this

A value of -1 will repeat a tween/timeline infinitely. The yoyo property will alternate direction.

https://codepen.io/jh3y/pen/OJNvNaX via @CodePen

4. Set a Value

Use the "set" to set a value for any property on the target. Our tweeters aren't scaling from the center. We can set the transform-origin to fix that

https://codepen.io/jh3y/pen/BaKrKMQ via @CodePen

5. Create a Timeline

Let's make the speakers jump. We could use a repeating tween again. But, I want to make our speakers squish down and then pop up, then return to normal

A timeline is like a chain of tweens

https://codepen.io/jh3y/pen/yLOKJzQ via @CodePen

6. Position && Repeat Delay

For the stack, we won't do squishing. Let's make it bounce side to side

We can use repeatDelay to sync the timeline with the speaker jump. Use the position parameter to run tweens simultaneously

https://codepen.io/jh3y/pen/xxVWOvO via @CodePen

7. Utilities && Function Based Values

Remember those notes

GSAP has some great utility functions such as "random"

We can also use function based values so we can generate a property value based on index for example

https://codepen.io/jh3y/pen/dyMmpjm via @CodePen

8. Repeat Refresh

If we are repeating a timeline or tween, we can make it invalidate and regenerate dynamic values such as function based

To do this, use repeatRefresh

Let's animate some of the controls on the stack with this

https://codepen.io/jh3y/pen/jOqzVEq via @CodePen

9. Nesting Timelines && Composition

We can add Tweens/Timelines to other Timelines

Structuring in this way makes it easier to maintain and do things like control all animations by pausing the main timeline for example

https://codepen.io/jh3y/pen/YzqapVM via @CodePen

10. Animate Anything

The cool thing with GSAP is that you can animate anything. It doesn't have to be a CSS property!

We can animate the standard deviation on an SVG filter to make the speakers look like they vibrating for example

https://codepen.io/jh3y/pen/ZEWxLEj via @CodePen

11. The "Little" Details

That's it! We've brought that Hi-fi to life!

When bringing things to life, try and look for small details you can add to give that little extra something.

We could add actual music and update the LCD

https://codepen.io/jh3y/pen/JjXLEKg via @CodePen

That's it!