home-export
I Make Things

About Me

Sarah Drasner is an award-winning Speaker, Senior Developer Advocate at Microsoft, 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 Frontend Masters workshops on Vue.js and 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.

navigation2

Projects

projects

Writing

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

24 Ways

Animation in Design Systems
published December 15, 2016

CSS-Tricks

The Art of Comments
published October 16, 2017
Exploring Data with Serverless and Vue: Filtering and Using the Data
published October 11, 2017
Exploring Data with Serverless and Vue: Automatically Update GitHub Files With Serverless Functions
published October 10, 2017
Simple Server Side Rendering, Routing, and Page Transitions with Nuxt.js
published July 24, 2017
Using Mixins in Vue.js
published June 14, 2017
Masking vs. Clipping: When to Use Each
published June 7, 2017
Using Filters in Vue.js
published June 3, 2017
Production Progressive Web Apps with JavaScript Frameworks
published May 27, 2017
The Power of Custom Directives in Vue
published April 20, 2017
Debugging Tips and Tricks
published April 11, 2017
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
A Guide to 2017 Conferences
published December 26, 2016
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

Super Yes More

Studio Commandments
published Jan 17, 2017

some of the fine
people I’ve worked with

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

clients

Speaking

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

Upcoming

You Gotta Love Frontend, Tel Aviv, Israel, Oct 30-31, 2017.

Past

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.
FullStack Fest, Barcelona, Spain, September 7-8, 2017.
Web Animation Workshops with Val Head, Portland, September 18-19, 2017.
D3 Unconf Keynote, San Francisco, CA, September 21-22, 2017.
The Web Unleashed- Workshop, Toronto, Canada, September 25-26, 2017.
JS Channel Keynote, Bangalore, India, July 28-29, 2017.
Develop Denver, Denver, CO, August 10-11, 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.
Frontend Masters: Vue, Online, July 14, 2017.
Vue Conf, Wrocław, Poland, June 22-23, 2017.
Vue Workshop, Wrocław, Poland, June 21, 2017.
Web Animation Workshops with Val Head, Toronto, June 12-13, 2017.
Awwwards Conference Keynote, Los Angeles, California, June 1-2, 2017.
React Europe, Paris, France, May 18-19, 2017.
Smashing Conf, San Francisco, April 4-5, 2017.
Beyond Tellerrand, Düsseldorf, May 15-17, 2017.
Beyond Tellerrand Workshop: SVG, from Animations to Data Visualisation, Düsseldorf, May 17, 2017.
FITC Toronto 2017- The Technology & Creativity Conference, Toronto, Canada, April 23-25, 2017.
Web Animation Workshops with Val Head, Chicago, April 13-14, 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.

Podcasts, Screencasts, and Interviews

CodePen Radio, June 20, 2017.
The Versioning Show, June 13, 2017.
Non-breaking Space, May 16, 2017.
Stack Overflow Podcast, May 8, 2017.
The Modern Web, Vue.js with Sarah Drasner and Evan You, April 27, 2017.
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.

Contact Me