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>
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
}
);Resources
Thank You!
Special thanks to Innovation Depot, TrendMicro and BASE!
I'll be sticking around for a bit to answer any of your questions.
Interactive SVG Animations
By Mehdi Vasigh
