Stuff I Didn't Know This Morning

My fiancé is a bit of a nerd. Just in case I hadn't noticed, he reminded me yesterday by spending 14 hours at a Magic: the Gathering event a few cities over, which meant that I had the house to myself. Not to be outdone in the dork department, I decided this would be a great opportunity to spend the day learning something new: SVG animation.

I'm a big fan of Sarah Drasner, and have been since the start of my coding journey. Sarah is an employee at Microsoft and on the core team at Vue, but she's also well-known for her work with animating SVGs (she literally wrote the book on it). When I saw she had a new class on Frontend Masters on SVG animation, I was excited to try my hand at it. Since I was looking for a good weekend project, this seemed like a great fit.

Today I'm doing a walk-through of what I learned and how. This isn't a tutorial, but if you're interested in learning about SVG animation yourself, I hope you'll check out the resources I mention!

The Game Plan

My goal was to get a foundation in SVG animation. As a benchmark, I hoped to animate some icons I designed last  year, and to make the A in my logo move.

The A in my logo waving hello!

I've never animated SVGs before, so to get a strong foundation, I ended up using a few different resources. Here's a quick overview of each.

Resources I Used

SVG Essentials and Animation by Sarah Drasner for Frontend Masters

January 2019, 4 hours and 15 minutes. Great at teaching about SVG optimization and how to use GreenSock, a JavaScript animation tool; assumes previous knowledge of CSS animations but not of SVG. Really great overview of how to make and optimize SVGs as well as animate them.

Motion Design with CSS by Rachel Nabors for Frontend Masters

September 2016, 4 hours. I added  this because I didn't have any background in CSS animations and I wanted to keep up! I loved the examples and practice assignments. The class assumes no prior knowledge of CSS animations and was really fun to do.

SVG Animation with JavaScript by Eva Ferreira PluralSight

July 2018, 1 hour. Quick overview of a variety of animation techniques, both native (CSS animation) and external (using tools like GreenSock or Velocity). If you've done the Sarah Drasner course, you don't need to do this one, but it's helpful if you need more concrete examples for how to use GreenSock.

JavaScript Animation with GSAP by Todd Shelton for PluralSight

April 2016, 3 hours. A more in-depth exploration of GreenSock. Todd uses jQuery to program his animations, but says you can use vanilla JavaScript. I only watched the first half, since I wasn't using jQuery and had already watched a lot of tutorials.

What I Learned

I had absolutely no foundation in SVG or CSS animation before this, and at the end of today, I feel that I got a solid foundation in both! I also learned a lot about the benefits of SVG animation (small file sizes, SVG is very well-supported, and it's accessible) and its possible applications (loaders, animations for fun, etc). I'd designed SVGs in Adobe Illustrator previously, but through these courses also learned to write SVGs using the previously-terrifying groups of numbers that are path and curve commands. Most importantly, I learned to spark joy through adorable moving icons, so I'll call this a win.

The A in my logo giving you a raspberry

What I Made

Here's the fun part! In total, I made five small animated SVGs yesterday: a spinning sun, an icon of me that looks around, and three moving versions of my logo. I've included GIFs of the logo animations throughout the post as well as the codepens below.

Creepy Icon of Me Looks Around

A simple SVG animation, where an avatar of me looks around the screen using CSS

I designed a set of icons of my best friends and me a few months back, and used these to make a small animation of me looking around. To do this, I used the transform CSS property to translateX and translateY on my eyes. It turned out vaguely creepy, but I literally clapped in excitement when I got it to work for the first time.

My Logo Smiles (I Thought This Would Look Cuter and More Impressive Than It Did)

The A in my logo smiles. It originally did this on load, but now does it on a loop so you can see better

My first logo animation goal was to make the swish on the A in my logo appear like a smile. I was able to do this pretty quickly using the CSS stroke-dasharray and stroke-dashoffset properties, but wasn't as happy with the result as I'd hoped. I decided to make my logo wave next, which I thought would take an hour and instead took one billion years (I write this to you from the afterlife).

My Logo Waves, a Small Feat that Makes Me Wish I Paid More Attention in Trigonometry

The A in my logo waves on hover

To make the A in my logo look like it's waving, I essentially had to move the tip of the swish back and forth, manipulating the SVG code itself using JavaScript. Here's a basic walk-through of what I did: it's not a tutorial, but may help you understand the thought process behind the code.

I set up a function called wave. Inside the function, I changed the X coordinate of the swish tip according to the current time, limiting its value to be between 435 and 445 (line 11). Then I took the new X value and inserted it back into the SVG whenever the function is called (lines 13 to 15). To make the swish move over time, I used requestAnimationFrame inside of my wave function, and had it call the wave function over and over as long as the the animation had been running for less than one second (line 5). Essentially,  this meant that the hand would wave over and over within that one second, each time the function was called. The reason the cut-off time is 942.4777 milliseconds and not 1000 is because at one second, the swish's final position wasn't its starting position. I needed the swish to end in the exact position it started so that the logo looked normal after you'd hovered on it. To manipulate this and to get the curve of the swish right, I had to rely on some trigonometric functions to calculate the exact number of milliseconds needed, which brought me back to the feeling of intense despair I had in high school calculus class. Once I'd figured it out, though, I was able to call the function on hover (lines 19 through 24).

My Logo Blows a Raspberry

Once I'd figured out how to do this (I'll be real, it took several hours), it was easy to get one final animation out: a raspberry. What can I say, it was one in the morning.

The A in my logo blowing you a raspberry

Conclusion

Thanks so much for reading about my learning process! I really enjoyed working on it, and I now feel like I have a good enough foundational understanding of SVG animation to dig deeper and make some cooler stuff. If you're interested in learning more about SVG animations, I hope you'll check out some of the resources I listed above. And if you have any questions, please comment below! Let's start a conversation.