Interactive SVG Animations

With JavaScript and GSAP

Mehdi Vasigh

July 30th, 2021

Who am I?

Mehdi Vasigh

Senior Engineer @ Mailchimp

♥️ Creative coding

👩‍🍳 UI chef

I love meeting people!

Twitter: @mehdi_vasigh

Scalable Vector Graphics
(SVG)

What is SVG?

SVG is a(n)...

image format
XML-based markup language
document format

all in one!

SVG can be used to create two-dimensional vector graphics that scale well to any resolution.

Like HTML, for images.

Although a bit daunting at first, you can write SVG code from scratch!

Learning and being comfortable with SVG markup will make you a better frontend engineer.

More: MDN

<!-- Here's a minimal example of an SVG image -->

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="10" fill="red" />
</svg>

View on CodePen

Anatomy of SVG

<!-- Here's a minimal example of an SVG image -->

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">

  <circle cx="50" cy="50" r="10" fill="red" />
  
</svg>

Common SVG Elements

Shapes

<rect>, <circle>, <polygon>, <polyline>, <path>

Effects

<mask>, <filter>

Structural

<g>, <defs>

More: MDN

Viewport and View Box

The viewport is the actual visible pixels that an SVG renders...

Whereas view box is like a finite window into an infinite SVG coordinate space.

Amelia Wattenberger has a great article and visual for this! Check it out

Source: DigitalOcean

Animating SVG!

Animating SVG with CSS and JavaScript

Just like HTML elements, SVGs work well with...

CSS styles, animations and transitions
CSS variables (even directly in attributes)
JavaScript DOM API

Let's Explore a Minimal Example

Going a Step Further

Animating SVGs using the vanilla API is fine, but not perfect.

Some issues you can run into are...

Cross-browser inconsistency
Performance degradation
Weird rules and gotchas
Tons of difficult-to-manage code

GSAP
(GreenSock Animation Platform)

What is GSAP?

GSAP is a JavaScript animation library (and collection of plugins)
that allows you to animate...

HTML elements
SVG elements
Canvas
Plain JavaScript objects

That's right. GSAP is not just an SVG animation library...
but it works great with SVG!

GSAP Tweens

Animations in GSAP are called tweens. You can think of a tween as a transition from one state to another over time.

Every animation in GSAP is a tween, and there are 3 different types:

```
gsap.from(...)
```
```
gsap.to(...)
```
```
gsap.fromTo(...)
```

/*
 * Rotate and move elements with a class of "box" 
 * ("x" is a shortcut for a translateX() transform) 
 * over the course of 1 second. 
 */

gsap.to(
  ".box", 
  {
    rotation: 27, 
    x: 100, 
    duration: 1
  }
);

GSAP Timelines

For complex animations, use timelines to sequence your tweens.

Timelines give you finer control over your animation as well, with methods like...

```
tl.resume()
```
```
tl.pause()
```
```
tl.reverse()
```

/*
 * Rotate and move elements with a class of "box" 
 * ("x" is a shortcut for a translateX() transform) 
 * over the course of 1 second. 
 */

gsap.to(
  ".box", 
  {
    rotation: 27, 
    x: 100, 
    duration: 1
  }
);