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.

Next Workshops:

  • Austin, TX: November 14-15, 2016
  • New York, NY: Dec 8-9 2016

Your Instructors

  • Sarah Drasner
  • ampersand
  • Val Head

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 on a book for O’Reilly 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 web animation consultant 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.

Next Workshops:

  • Austin TX: Nov 15-16 2016
  • New York NY: Dec 8-9 2016
Get A Ticket

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:

Workshop Tickets

Austin Workshop Tickets

November 14-15, 2016 at IBM Studios Austin (11501 Burnet Road, Austin, TX 78758)

NYC Workshop Tickets

December 8-9, 2016 at IBM Studios Astor (51 Astor Place, New York, NY 10003)

By purchasing a ticket you are agreeing to abide by our code of conduct.


Diversity scholarships are available for all of our public workshops. If you’re a member of an under-represented group in tech, apply for a scholarship ticket here. Scholarship tickets will be awarded four weeks prior to the workshop dates.

Ticket Details:

Only 40 seats are available in each workshop. The first ten tickets for every workshop go at the Early Bird rate. A limited number of discounted tickets are available for each workshop for self-employed/freelance attendees. You may be asked to prove your freelance status if you purchase these tickets. Workshop tickets are transferrable, but not refundable. Contact [email protected] for any ticket questions.

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 early 2017 and we’d be happy to customize a workshop for your team.