I interviewed the wonderful Sarah Drasner about her book on SVG Animations for the UI Animation Newsletter. She had so much helpful advice that I had to post it here too:
Why is now the time to learn SVG animation?
Sarah: SVG has been around for ages, and so has animation on the web- but due to solid support across the board for both having just hit in the last few years, the can of worms is now open! The most amazing thing about SVG is that it’s a graphic that’s built with math. When you think about the opportunity this affords us in terms of manipulation- for data, storytelling, and intriguing user experiences on the web, we have so many possibilities open to us. You can keep it simple and transform a small icon from one state to another, or you can build complex worlds with elemental properties and realistic environments, made richer through unique offerings like SVG filters. The sky’s the limit, and we’re just now starting to understanding the breadth of what’s possible.
The other reason it’s amazing to learn SVG animation now is that we live in a world proliferated with so many devices. SVG offers a small file size, the ability to be accessible, and it’s also scalable. It’s in the name! (Scalable Vector Graphics). This means they work like a dream for responsive builds, we don’t have to cut a million images or worry about image replacement. Even the animation within the SVG DOM scales, so you don’t have to rewrite anything or work with crazy positioning hacks. Working with images on the web has gotten really complex. SVG makes it simple again.
Our books are even colour-coordinated! That’s how well they go together. Pick yourself up a copy of SVG Animations and Designing Interface Animation for your web animation library today.
There are so many options for SVG animation, it can get overwhelming! What’s the best way for someone brand new to it to get started?
Sarah: That’s absolutely true, and that’s why I worked really hard to write this book from the point of view of someone new to this environment- I go through the SVG DOM and explain what you’ll find inside, and I have a chapter to compare animation libraries and native implementations- the pros and cons of each. I cover quite a few different ways to animate in the book: CSS animation, requestAnimationFrame, GreenSock, mo.js, React-Motion, and even what to think about for data visualizations. I try to make it clear what the benefits of working with each can be.
In the second chapter, I go over some of the differences and gotchas one might encounter if they’re familiar with animating HTML elements and just now learning SVG. There are a couple of things that might trip you up when you first start learning, so I make sure to address them as we go!
You cover both design considerations and the code side of animating SVG in the book. Why is it important to consider both when animating?
Sarah: I think it’s important to understand the why as well as the how. Animation can be really powerful- our eyes go directly to something in motion. And for that reason, we have to be careful about how we animate and what we use it for. It’s really important to not overdo it. I discuss some theory behind animation and design considerations because animation is an interesting cross-section of both code and design. It tends to function as a layer in between. When done well, it makes transitions seamless for the user, and empowers their experience. In this way, education about both aspects is not only vital, but really interesting!
What was your favourite part about writing the book?
Sarah: I love writing for the community. It’s amazing to see what people out there do when they know how to make the most of their tools. Every day I go to CodePen and Github and am in awe of the people I feel lucky to call my community. Writing a book that might be used by someone to create something amazing is a real honor! I love working with SVG animations. When my job has been at times arduous, working with SVG animations has helped me stave off burnout. I’m hoping that other people find as much joy in working with these beautiful and unique technologies as I do!
If you want to learn more about SVG animation, I highly recommend checking out Sarah’s book. And if you want some hands-on training in web animation, check out our Web Animation Workshops.
