I Make Things

About Me

Sarah 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 the author of SVG Animations from O’Reilly and has given a Frontend Masters workshop on Advanced SVG Animations. Sarah is formerly Manager of UX Design & Engineering at Trulia (Zillow). Sarah won CSS Dev Conf’s “Best of the Best Award” as well as “Best Code Wrangler” from CSS Design Awards. She has worked for 15 years as a web developer and designer, and at points worked as a Scientific Illustrator and an Undergraduate Professor, and has tutored a Byzantine Icon painter in Santorini.





I'm an O'Reilly Author! Buy my book on SVG Animations!

24 Ways

Animation in Design Systems
published December 15, 2016


Intro to Vue: Animations
published Feb 3, 2017
Intro to Vue: Vuex
published Feb 2, 2017
Intro to Vue: Vue-cli and Lifecycle Hooks
published Feb 1, 2017
Intro to Vue: Components, Props, and Slots
published Jan 31, 2017
Intro to Vue: Rendering, Directives, and Events
published Jan 30, 2017
An Introduction to mo.js
published Nov 17, 2016
On Style Maintenance
published Oct 21, 2016
A Nerd’s Guide to Color on the Web
published Sept 12, 2016
My New Favorite ES6 Toy: Destructured Objects as Parameters
published Sept 6, 2016
High Performance SVGs
published August 1, 2016
Interactive Data Visualization: Animating the viewBox
published June 8, 2016
A Comparison of Animation Technologies
published May 2, 2016
Creating an SVG Icon System with React
published March 15, 2016
Introducing CSS Scroll Snap Points
published March 2, 2016
An Interview with Una Kravets
published February 26, 2016
I Learned How to Be Productive in React in a Week and You Can, Too
published February 8, 2016
SMIL is dead! Long live SMIL! A guide to alternatives to SMIL features
published December 14, 2015
A Guide to 2016 Front End Conferences
continuously updated
The Making of the CSS-Tricks Logo Easter Egg Animation
published November 6, 2015
The Importance of Context-Shifting in UX Patterns
published September 10, 2015
Debugging CSS Keyframe Animations
published August 3, 2015
Weighing SVG Animation Techniques (with Benchmarks)
published January 27, 2015

Net Magazine

Create Animations that Scale for All Devices
published April, 2016
Gallery- Sensational Design and Superb Development
published February, 2016
Voices Q&A: Maya Benari
published February, 2016

David Walsh Blog

GSAP and SVG for Power Users Part 3: New 1.18.0 Features
published October 6, 2015
GSAP and SVG for Power Users Part 2: Complex Responsive Animation
published July 14, 2015
GSAP and SVG for Power Users Part 1: Motion Along a Path
published June 29, 2015

Smashing Magazine

Practical Techniques on Designing Animation
published June 8, 2015
A Few Different Ways To Use SVG Sprites In Animation
published March 17, 2015

some of the fine
people I’ve worked with

CSS-Tricks, NetMag, Microsoft,
Smashing Magazine, IBM, Zillow,
O’Reilly, Frontend Masters, & Mule Design.



Take an animation workshop from me and Val Head! Check for locations near you
I’m a Frontend Master! View my course on Advanced SVG Animations


Web Animation Workshops with Val Head, Chicago, April 13-14, 2017.
FITC Toronto 2017- The Technology & Creativity Conference, Toronto, Canada, April 23-25, 2017.
Beyond Tellerrand, Düsseldorf, May 15-17, 2017.
Beyond Tellerrand Workshop: SVG, from Animations to Data Visualisation, Düsseldorf, May 17, 2017.
React Europe, Paris, France, May 18-19, 2017.
Awwwards Conference Keynote, Los Angeles, California, June 1-2, 2017.
Vue Conf, Wrocław, Poland, Summer, 2017.
JS Channel Keynote, Bangalore, India, July 28-29, 2017.
Web Animation Workshops with Val Head, Denver, CO, August 18, 2017.
Frontend Conference Zurich, Zurich, Switzerland, August 31-September 1, 2017.
Web Animation Workshops with Val Head, Paris, September 4-5, 2017.
Frontend Conference Zurich Workshop, Zurich, Switzerland, TBA, 2017.
FullStack Fest, Barcelona, Spain, September 7-8, 2017.
The Web Unleashed- Workshop, Toronto, Canada, September 25-26, 2017.
edUI Conf- Workshop, Virginia, September 27, 2017.
CSS Dev Conf Featured Speaker, New Orleans, LA, Oct 9-11, 2017.
CSS Dev Conf Workshop with Val Head, New Orleans, LA, Oct 11, 2017.
Web Animation Workshops with Val Head, Pittsburgh, Oct 13, 2017.
Smashing Conf Barcelona, Barcelona, Spain, Oct 17-18, 2017.
Reactive Conf, Bratislava, Slovakia, October 26-28, 2017.

Podcasts, Screencasts, and Interviews

Thundernerds, April 10, 2017.
Toolsday: Animation Tools with Sarah, December 20, 2016.
Coding Rainbow, Guest Tutorial: Web Animations and Mo.js, December 19, 2016.
JavaScript Air, Web Animations, June 29, 2016.
Scotch Makes Us Animated, Front End Happy Hour, June 6, 2016.
Shoptalk Show episode on Animation with Val Head, May 20, 2016.
React Powered Comment Form Pairing with Chris Coyier on CSS-Tricks, March 18, 2016.
Episcura, March 9, 2016.
Non-Breaking Space, January 18, 2016.
SVG Immersion Podcast Round Table: Sarah Drasner, Petr Tichy, Dudley Storey, November 27, 2015.
Shop Talk Show, August 4, 2015.
CSS Design Awards, June 10, 2015.
SVG Immersion Podcast, April 16, 2015.


Smashing Conf, San Francisco, April 4-5, 2017.
Smashing Conf Workshop: Advanced SVG Animations, San Francisco, April 6, 2017.
SFHTML5, San Francisco, April 7, 2017.
Forward JS Workshop, San Francisco, CA, Mar 4, 2017.
Web Animation Workshops with Val Head, San Francisco, February 20-21, 2017.
SVG Summit, Online, February 15, 2017.
Sass Summit, Environments for Humans, Online, Dec 14, 2016.
Web Animation Workshops with Val Head, New York, Dec 8-9, 2016.
CSSDay.io Keynote, Arizona, Dec 3, 2016.
CSS Dev Conf Asia, Singapore, Nov 24, 2016.
Web Animation Workshops with Val Head, Austin, TX, Nov 14-15, 2016.
O’Reilly Live Training: Building SVG Animations, Boston, MA, Nov 1-2, 2016.
CSS Dev Conf, San Antonio, TX, Oct 17-18, 2016.
Fronteers, Amsterdam, Oct 6-7, 2016.
Fronteers Workshop: Advanced SVG Animation, Amsterdam, Oct 5, 2016.
CSSConf Keynote, Boston, MA, Sept 26-27, 2016.
Mirror Conf, Braga, Portugal, CA, September 23-24, 2016.
Smashing Conf Freiburg, Freiburg, Germany, Sept 12-13, 2016.
React Rally Keynote, Salt Lake City, UT, August 25-26, 2016.
Generate Conf (NetMag), San Francisco, CA, July 15, 2016.
Smashing Conf New York, New York, NY, June 14-15, 2016.
Smashing Conf Workshop: Advanced SVG Animations, New York, NY, June 16, 2016.
Valio Con, San Diego, CA, May 19-22, 2016.
Generate Conf (NetMag), New York, NY, April 22, 2016.
CodePen Meetup, San Francisco, CA, April 6, 2016.
O’Reilly Fluent Keynote and Session, San Francisco, CA, March 8-10, 2016.
JavaScript Summit, Online, February 23-24, 2016.
ForwardJS Summit, San Francisco, CA, February 10, 2016.
SVG Summit, Online, January 21, 2016.
CSS Dev Conf in Long Beach, CA, October 26-27, 2015.
Frontend Masters “Advanced SVG Animations” Workshop. October 23, 2015.
CSS Summit online conference. July 7-9, 2015.
CSS Conf in New York, NY. June 18-19, 2015.
Codepen Meetup in Palo Alto, CA. April 1, 2015.
Html5DevConf in San Francisco, CA. October, 2014.
Html5DevConf in San Francisco, CA. October, 2013.
DevCon5 in New York, NY. July, 2013.

Contact Me