Designing Delightful Animations For The Web

Your instructor: Chris Gannon

Full-day workshop • Monday, June 24
Lots Of Simple Things, One At A Time

In 1981 Disney animators Ollie Johnston and Frank Thomas introduced the Twelve Basic Principles of Animation, a set of techniques designed to add life to animation, in the book The Illusion of Life: Disney Animation.

Fast forward to the present day and these principles are no less relevant and can be applied, in varying degrees and contexts, to web animation.

In this workshop we'll explore each principle and learn to interpret them for and apply them to the modern web.

Over the past few years Chris have developed a workflow for designing and building SVG animations that he uses in his everyday work. He is constantly tweaking this process to ensure it keeps him as productive as possible. In this full-day workshop, Chris will be exploring an efficient workflow for creating animations for the web that make a lasting impression and increase engagement.

Along the way, we’ll also explore some other important topics like the 12 Principles of Animation, performance, optimization and odd quirks (of which there are a few!).

Beware: by the end of the day Chris expects to be out of a job 😊

Takeaways for the workshop

In the session we’ll learn how to take a static vector design, like an Adobe Illustrator file, and turn it onto an interactive animation, carefully separating and grouping the individual elements, exporting them for use in a page and adding interactivity.
We’ll be using Greensock to animate everything and we’ll cover some of the many useful, time-saving features it offers.
We’ll also explore some common questions around the viewBox, SVG filters, performance, optimisation and odd quirks (of which there are a few!).

Who is the workshop for?

The workshop is for designers and developers alike who want to learn about animation as a skill and how it can be used on the web. If you have a base knowledge about Javascript you’ll get the most out of this workshop.

What hardware/software do you need?

Please bring your own laptop and make sure you have a Codepen account, since we will be using Greensock to animate (on Codepen you can use all the paid plugins for free).

A copy of Illustrator would be very useful too but any vector software that can export SVG is fine. If you have After Effects installed too and that would be a huge bonus too - after all this session is about animation!

About Chris Gannon

Chris is an independent animator, illustrator and interactive designer from the UK. He specialises in delicious interactive SVG animation and has worked his magic on some of the world’s biggest (and smallest) companies.

His fresh and experimental approach to his work has been recognised with multiple CSS Design awards and recently he’s noticed he has an unnatural obsession with eggs and outer space.

Time & Location

This full-day workshop will be hosted at the Ivey Tangerine Leadership Centre and will take place the day before SmashingConf. The workshop will be running from 9:30am to 5:00pm on Monday, June 24.

Schedule for Monday, June 24

9:00 AM – Doors open, Registration
9:30 AM – Introduction & Kick-off
11:00 AM – Coffee Break
1:00 PM – Lunch
2:00 PM – Afternoon Session
3:30 PM – Coffee Break
5:00 PM – The End

Save C\$100 when signing up for the conference and a workshop!