X

Menu

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. She’s formerly Manager of UX Design & Engineering at Trulia (Zillow). She’s given a Frontend Masters workshop on Advanced SVG Animations, and is working for a book for O’Reilly on SVG Animations. Last year Sarah won CSS Dev Conf’s “Best of Best of 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.

pen

Recent Articles

CSS-Tricks

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

LATEST ON THE BLOG

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 »
code

Speaking Engagements

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

Upcoming

ForwardJS, San Francisco, CA, July 29, 2016.
React Rally Keynote, Salt Lake City, UT, August 25-26, 2016.
Smashing Conf Freiburg, Freiburg, Germany, Sept 12-13, 2016.
Mirror Conf, Braga, Portugal, CA, September 23-24, 2016.
CSSConf Keynote, Boston, MA, Sept 26-27, 2016.
Fronteers, Amsterdam, Oct 6-7, 2016.
Fronteers Workshop: Advanced SVG Animation, Amsterdam, Oct 5, 2016.
CSS Dev Conf, San Antonio, TX, Oct 17-18, 2016.
CSS Dev Conf Asia, Singapore, Nov 24, 2016.
Smashing Conf UK, Oxford, United Kingdom, Mar 15-17, 2017.
FITC Toronto 2017- The Technology & Creativity Conference, Toronto, Canada, April 23-25, 2017.
Smashing Conf Barcelona, Barcelona, Spain, Oct 17-18, 2017.

Past

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.

see Keynote

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, 2016.

see Designing Complex SVG Animation talk

Frontend Masters “Advanced SVG Animations” Workshop. October 23, 2015.

CSS Summit online conference. July 7-9, 2015.

see SVG Sprites for Animation talk

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.

mic
-a child to Dr. Seuss

“Your imagination has a very long tail”

-a child to Dr. Seuss

Latest Tweets