Skip to main content Jump to list of all articles
Sarah Drasner

Sarah Drasner

Sarah is an award-winning Manager of UX Design & Engineering at Trulia and staff writer at CSS-Tricks. She’s given a Frontend Masters workshop on Advanced SVG Animations and is working for a book for O’Reilly on SVG Animations. 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. Sarah has also taught a literacy program for the Cartoon Art Museum in San Francisco.

Storytelling in the Age of JavaScript

Many of us are telling stories on the web- whether it be expressing concepts with data visualization, the story of how our product works, or simply writing good documentation. JavaScript is insanely powerful for gradually revealing information through animation, manipulating graphics with SVG, Canvas, and WebGL, or allowing users to guide themselves through interaction.

In this talk, we’ll explore how our minds work on the web and how JavaScript can reach to new heights of composing experiences that attach to our limbic system and captivate us. We’ll dive deep into some of the how’s about these type of implementations and create live demos that bring these concepts to life.

Innovative SVG Animations

By now most Front-End Developers know the benefits of working with SVG: great support, resolution, and scalable images that can reduce the needs for multiple HTTP requests and be easily scaled to multiple viewports. But SVGs are capable of so much more.

In this session, we’ll manipulate vectors with a myriad of creative techniques, ranging from the practical, such as data visualization with React, to the delicate, such as imitating candle smoke with morphing path data. We’ll go over how to increase engagement and performance with examples and case studies. We’ll use SVGs as a window with clipPath, push the boundaries of the CPU with filters, and even combine techniques to create otherworldly effects.