Year round learning for product, design and engineering professionals

Web Directions 2013 spotlight – Animation

A few words on how my upcoming workshop with Pasquale D’Silva, Animating Your User Experiences, came about.

Want to know a bit more about the thinking behind our program, and the backstory to some of the sessions at the conference? We’ll be running a series of posts detailing how various sessions ended up on the Web Directions South program.

We’ve been doing animated interfaces on the web since someone first came up with the JavaScript rollover effect back in the mid 1990s. Things really got going with the introduction of the CSS :hover selector, though it was not until almost a decade later, that we started to see quite sophisticated animations on the web, with effects built into, or on top of various JavaScript libraries and frameworks.

But it was really the arrival of the iPhone, with its 2D and even 3D transitions between application states, coupled with the arrival of CSS transitions and transforms that saw complex animations really start to take off on the web.

However, just as typography is about much more than just choosing fonts, animation is far more than simply using Homer Simpson’s favourite effect, the star wipe. Animation has a long history (there’s even speculation some of the earliest cave paintings were a kind of animation), as does the theory on animation, perhaps most famously outlined in what’s considered something of a bible for animators, The Illusion of Life: Disney Animation, which outlines 12 basic principles of animation. I’m pretty sure the star wipe is not one of them.

At Web Directions, we’ve long recognised the increasing use, and importance, of animation in user experience and interface design, and we have in fact been looking for several years for the right person, with a mix of practical skills, and theoretical understanding to speak on this subject, without any success.

Then, a couple of months back, we happened upon Transitional Interfaces, by Pasquale D’Silva, which was pretty much made to order.

Animation leverages an overlooked dimension — time! An invisible fabric which stitches space together. You don’t have to be a math dork to understand this.

It’s a fantastic, detailed, well written, lovingly illustrated and above all practical article. So, we asked ourselves, “have we found our presenter on animation?” What we typically do when we find an article like this, is go looking for past presentations by the writer. But we really couldn’t find much, other than some rather quirky bits on Vimeo. A bit of a man of mystery it would seem was our Pasquale.

Which presented a dilemma. Do we take a risk on someone who we’re not sure won’t possibly freeze on stage? Or who’ll not translate from the written and visual to the spoken arena? So we started a bit of a dialogue with Pasquale and his combination of knowledge, enthusiasm and modesty all said to us we should get him on board. Not only that, but after a bit more discussion, we felt maybe a workshop in addition to the conference session would be in order.

Because Pasquale typically works with animation tools like Quartz Composer, we decided that to give the workshop even more relevance to web designers and developers, we could begin with a session on implementing animations with CSS, which is something John has written about and even developed tools for. So, two people who’ve only exchanged emails, Pasquale and John, are going to be doing a workshop together on animation for the web at Web Directions. Don’t you love it when a plan just comes together?

We’re really excited about this presentation and workshop, which represents something about Web Directions we’re really proud of—working to uncover talented professionals in our medium, and encouraging and helping them bring their expertise to a wider audience.

Want to learn more about animated user experiences and the web, then don’t miss the workshop, or Web Direction South 2013.

delivering year round learning for front end and full stack professionals

Learn more about us

Going to #wds18 has given me inspiration to attend more conferences. Meeting tech folks like myself and learning from each other is pretty amazing!

Hinesh Patel Ruby and React Developer