Workshop: The Web in Motion, with Val Head
- Wednesday, 4 October, 2017, 9:00-17:00 CEST
- Spaces Vijzelgracht, Vijzelstraat 68-72, Amsterdam
The Web in Motion
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 difference 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.
Classic animation techniques worth stealing
The “12 classic principles” and other useful animation techniques. We’ll look at the short list of ones matter most and how they translate to the world of web animation.
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.
About Val Head
Val Head (@vlh) is a web animation expert and author with a talent for getting designers and developers alike excited about the power of animation. She is the author of Designing Interface Animation on Rosenfeld Media and teaches CSS Animation on lynda.com. Val curates the UI Animation Newsletter, co-hosts the Motion and Meaning podcast, and leads web animation workshops at companies and conferences around the world.