Learn Web Animation From the Experts

Level up your web animation skills with Val Head and Sarah Drasner in this two-day web animation course. You’ll learn everything you need to know to design and code expert level web animation through hands-on exercises and curated examples.

Join our mailing list below to be notified when new dates are announced.

Your Instructors

  • Sarah Drasner
  • ampersand
  • Val Head

Sarah is an award-winning Speaker, Senior Developer Advocate at Microsoft, 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 has an O’Reilly book on SVG Animations.

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 Front-End Engineer, and enjoys welding together pieces of the DOM.

Val is a designer and Design Advocate at Adobe with a talent for getting designers and developers alike excited about the power of animation. She is the author of Designing Interface Animations on Rosenfeld Media and teaches CSS Animation on lynda.com.

She curates the UI Animation Newsletter, hosts the All The Right Moves screencast, and co-hosts the Motion and Meaning podcast. Val leads workshops at companies and conferences around the world on motion design for the web and loves every minute of it.

The Workshop

  • Web Animation 0 to 60:
  • CSS, JavaScript, and SVG Essentials

This workshop will get you up and running with web animation in less time than it would take to read all the tutorials you have bookmarked. Over two days, you’ll go from beginner or novice web animatior to having expert level knowledge of the current web animation landscape. You’ll get an in-depth look at animating with CSS, JavaScript, and SVG through hands-on exercises and learn the most efficient workflows for each. Learn how to make your product or project standout from the competition with performant, effective, and well designed animation. Topics covered in this workshop include:

Essentials of CSS animation

We’ll cover what CSS transforms, transitions, and keyframe animations can do and how to use them effectively in your work. We’ll also cover how to decide which web animation option is the best solution for your projects.

Basics of TweenMax & TimelineMax

The basics of GreenSock’s TweenMax, one of the most powerful and popular JavaScript animation frameworks, for more complex logic and animation tasks. We’ll also cover reasons to consider using an animation library and how to choose one that will work best for your projects.

Principles of UI/UX for animation

Best practices and principles to follow to ensure the animations you create are adding something positive to the user experience, not distracting from it.

Classic animation principles worth stealing

Classic animation principles and motion graphics techniques that will make your web animation work look more professional and polished.

SVG workflow and optimization

Tools and techniques for creating smart and performant SVGs to animate.

SVG animation

The basics of animating SVGs both with CSS and JavaScript. We’ll cover what each option can do with SVG and how to decide which to use to get the job done.

Animating with React

Animating in React with GreenSock and React-Motion. We’ll cover the differences of animating with React’s virtual DOM, some gotchas, and how to debug performance issues.

The Web Animation API

A look at what’s coming in this latest spec, an overview of how to use it, and what it means for the near future of web animation.

Web animation performance

Techniques and properties that will help you squeeze the best performance out of your animations, plus perceived performance considerations.

Stay up to date!

Be the first to know when new dates are announced. Join the updates list below for early access to tickets when new workshops are announced. We never spam.

What it’s like to work with us

"Two of the most talented web animators and educators teaming up? Heck yes. Sarah and Val can teach you animation, but more importantly, they can teach how to do it well. They know there are many tools in the animation toolbox, they know about performance, they know how animation can affect a brand. This is the team you want teaching your team."

Chris Coyier

"One thing is certain: when working with Sarah and Val, the result won’t just exceed your expectations — everything will run smoothly and silky as the beautiful animation work they produce. Highly recommended!"

Vitaly Friedman

Editor-in-chief of Smashing Magazine

"Sarah Drasner's writing and verbal communication skills to relate complex animation techniques with ease is very rare in our industry. Val Head's enthusiasm for web animation is beyond contagious as she continuously does the impossible: converting dry animation specifications into brand essential animation ideas. Together, they are an unstoppable duo fighting crime of bad web animation."

Christopher Schmitt

Conference Chair for
Environments for Humans

Questions or in-house workshop enquiries?

Get in touch with us directly if you have any questions about the workshop or if you’d like to discuss booking an in-house workshop. We are currently booking in-house workshops for 2018 and we’d be happy to customize a workshop for your team.