Sarah Drasner — The Guide to Designing SVG Animations

Sarah Drasner is an award-winning speaker, consultant, and staff writer at CSS-Tricks. Sarah is also the co-founder of Web Animation Workshops, with Val Head. She’s given a Frontend Masters Workshop on Advanced SVG Animations and is the author of SVG Animations. She’s formerly Manager of UX Design & Engineering at Trulia (Zillow). Last year Sarah won CSS Dev Conf’s “Best of Best of Award” as well as “Best Code Wrangler” from CSS Design Awards.

Sarah Drasner is an award-winning speaker, consultant, and staff writer at CSS-Tricks. Sarah is also the co-founder of Web Animation Workshops, with Val Head. She’s given a Frontend Masters Workshop on Advanced SVG Animations and is the author of SVG Animations. She’s formerly Manager of UX Design & Engineering at Trulia (Zillow). Last year Sarah won CSS Dev Conf’s “Best of Best of Award” as well as “Best Code Wrangler” from CSS Design Awards.

This episode of Non Breaking Space Show is sponsored by:


CSS Dev Conf — Conference dedicated to CSS and its super friend technologies like JavaScript, Sass, npm, and more. A limited supply of Early Bird Tickets now on sale. Register now!
UX Design Newsletter — A weekly free newsletter containing a collection of tutorials, articles, and videos about front-end design and development, plus tips on how to bring better engagement to the multi-device world curated by Christopher Schmitt. Sign up now!

Jump to a conversation on…

2:50 Talking goats. Animating goats.
5:40 Explaining viewbox over Twitter
9:00 Learning what’s going on under the hood so you can troubleshoot it.
10:40 As long as people have maintenance as their core idea.
13:20 Both sides seems to think the other side is a junior developer.
15:40 One size fits all doesn’t work on the web very well.
18:30 Generalists to specialists to micro-specialists.
20:01 When I was starting you couldn’t just be the designer.
26:05 I remember a time when browsers could fit on a floppy disk.
27:49 Performance is what gets me so excited about SVG.
32:00 The importance of SVG and how it helps solve our problems.
34:50 You redid your site while you had the flu?
38:20 Are we allowed to talk about above the fold?
40:00 Why a performance budget of under 2s?
44:01 Chances are what you see someone put out isn’t their first attempt.
45:20 Sarah does not poop things from her brain.
46:01 How do you keep up with things that change on the web so quickly?
51:30 I was striving to make sure you have a few options when animating SVG.
55:00 How can people find Sarah Drasner on the internet?

Links:

Christopher Schmitt
Christopher Schmitt on Twitter
📺 Sarah Drasner — The Guide to Designing SVG Animations
Sarah Drasner
Sarah Drasner on Twitter
Sarah on Github
Sarah on CodePen
Web Animation Workshops
Goat Simulator
SVG Animations - From Common UX Implementations to Complex Responsive Animation
Kai’s Power Tools
Non Breaking Space Show on TuneIn
Non Breaking Space Show for Android
Non Breaking Space Show on Google Play
Non Breaking Space Show on iTunes
Non Breaking Space Show on Facebook
📺 Non Breaking Space Show on YouTube
Non Breaking Space Show Newsletter