Motion design is quickly becoming a necessary skill for anyone working on the web today. Designers and developers across the web are embracing the the power of web animation to engage and communicate.

This Training will get you started with the essentials of web animation. It covers the basics of motion design theory as it applies to the web, and how to use animation to improve the user experience. In addition to the theory, we’ll use hands-on exercises to explore the similarities and difference of animating with CSS, JavaScript, and SVG. You’ll leave knowing how to bring your work to life with motion in meaningful ways and which web animation tool to use to get it done.

This Training is for front end developers and web designers looking to dig into the code side of web animation while making quality motion design decisions for their work.

What you’ll learn:

Animating in CSS vs JavaScript

Using hands-on code exercises we’ll look at what animation tasks each of these are best at, how to choose between the two and how they can work together.

Animating SVG

We’ll animate SVG via CSS and Javascript and cover the most foolproof ways to animated SVG despite differences in browser support.

Animation and performance

Animation can have both real and perceived effects on performance. We’ll cover which properties browsers can animated most efficiently and how to improve perceived performance by adding animation.

How animation can improve UX

The design problems animation can help solve through providing feedback, showing causality, orientation, showing spatial relationships, guiding tasks and cueing. Examples of each will be reviewed and discussed to help you decide which techniques will be most useful for your work.

Classic animation techniques worth stealing

The 12 classic principles and other useful tried and true motion design techniques. We’ll look at the short list of ones matter most on the web, plus how they translate to UX and the digital space.

Principles of interactive animation

There is more to consider than just the classic principles for interface animation. Animation should never get in the way of the task at hand. Val will show you how to be sure you’re animations are interruptible, non-blocking, and appropriately timed for interaction.

The future of web animation

What’s coming next, what’s almost here, and what you, yes you!, can do to influence the future of web animation.