This workshop will get you started with the essentials of web animation. We’ll cover 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 differences of animating with CSS, JavaScript, and SVG. You’ll leave knowing how to bring your work to life with skill and which web animation tool to use to get it done.

If you’re a frontend developer or web designer looking to improve your web animation skills this workshop is for you!

What you’ll learn

Animating with CSS, JavaScript, and SVG

Using hands-on code exercises, we’ll look at what animation tasks each of these are best at, how to choose between them, and how they can work together. We’ll cover the basics of animating with CSS, the Greensock JavaScript animation library as well as using both to animate SVG.

Where animation can improve UX

A quick look at the specific design problems animation can solve through providing feedback, exposing causality, orientation, showing relationships and demonstrating.

Animation and performance

Animation can have both tangible and perceived effects on performance. We’ll cover which properties browsers can animated most efficiently and how to improve perceived performance with the clever use of animation.

What You'll Need For the Workshop

No prior experience with web animation is required, but a solid foundation in HTML and CSS is recommended. Familiarity with JavaScript is helpful but not required.

A laptop with a text editor and a current version of Chrome or Firefox will be needed to participate in the workshop exercises. A (free) Codepen.io account will also be helpful. We’ll be using that for the exercises and demos.

When and Where

1st of October 2019, Magna Pars, Via Tortona 15, Milan