I make things.

See things

I make things.

See things

This is Me

I make websites and drawings

Sarah DrasnerSarah DrasnerConsultant

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 a Undergraduate Professor, and has tutored a Byzantine Icon painter in Santorini. Sarah has also taught a literacy program for the Cartoon Art Museum in San Francisco.


Recent Articles

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


Rumination Station

A New Direction

A New Direction

“The work you do while you procrastinate is probably the work you should be doing for the rest of your life.” ― Jessica...

Read More »
A Look Back on 2015

A Look Back on 2015

My New Years resolution last year was to publish an article in CSS-Tricks. I’m now proud to say I’m a staff writer for t...

Read More »
Small Things I've Found While Working With SVG

Small Things I've Found While Working With SVG

Here are a few little things I've found from working with SVG for a little while. No showstoppers here, just hoping my t...

Read More »
Thought Morphology

Thought Morphology

My artist's statement is a process of critiquing my process. Here I delve into why.

Read More »
Using Font-Icons in Place of SVG for CSS3 Animations

Using Font-Icons in Place of SVG for CSS3 Animations

Get greater support for SVGs and pull them out of the iframe with this simple workaround.

Read More »
Balancing Time

Balancing Time

I work on many personal projects concurrently and it can become a delicate balancing act. Here are some ways that I mana...

Read More »

Speaking Engagements

I’m a Frontend Master! View my course on Advanced SVG Animations



SVG Summit, Online, February 15, 2017.
Web Animation Workshops with Val Head, San Francisco, February 20-21, 2017.
Forward JS Workshop, San Francisco, CA, Mar 4, 2017.
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.
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 Tellerand, Düsseldorf, May 15-17, 2017.
Beyond Tellerand Workshop: SVG, from Animations to Data Visualisation, Düsseldorf, May 17, 2017.
React Europe, Paris, France, May 18-19, 2017.
Awwwards Conference, Los Angeles, California, June 1-2, 2017.
Vue Conf, Wrocław, Poland, Summer, 2017.
JS Channel, Bangalore, India, July 28-29, 2017.
Frontend Conference Zurich, Zurich, Switzerland, August 31-September 1, 2017.
Frontend Conference Zurich Workshop, Zurich, Switzerland, TBA, 2017.
The Web Unleashed- Workshop, Toronto, Canada, September 25-26, 2017.
edUI Conf- Workshop, Virginia, September 27, 2017.
CSS Dev Conf, New Orleans, LA, Oct 9-11, 2017.
CSS Dev Conf Workshop with Val Head, New Orleans, LA, Oct 11, 2017.
Smashing Conf Barcelona, Barcelona, Spain, Oct 17-18, 2017.
Reactive Conf, Bratislava, Slovakia, October 26-28, 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.

-a child to Dr. Seuss

“Your imagination has a very long tail”

-a child to Dr. Seuss

Latest Tweets