Web Directions Year round learning for product, design and engineering professionals

Well, things are hotting up in the Web animation world, with a pair of articles at A List Apart, on UI Animation and UX, and Web animation at work but if you’ve followed us for a while, you’ll likely know we’ve been big on Web animation since before it was the thing. So, we thought we’d round up some of the resources we’ve come across to help you incorporate animation in your Web experiences.

Way back in 2011 we published an indepth tutorial on CSS transitions and animations, Let the Web move you. In it I covered all the core features of CSS animation.

To help you explore CSS animation I developed a web based animation tool, AnimatR, which makes it easy to see how CSS animations work, without worrying too much about the fiddly bits of syntax.

Then, at Web Directions South last year, I presented Satisfying Movements (you can watch the video here). It looks at CSS transitions and animations, including things you might want to watch out for.

At the conference, we also had a fantastic presentation on the principles of animation, Designing with animation by Pasquale D’Silva. Just as typography is much more than just fonts, animation is much more than just moving things on a screen. Pasquale looks at many of the most important principles of animation, and how they apply to user interfaces, with great real world examples. It’s rightly one of our most watched videos ever.

We also have the much loved Dmitry Baranovskiy (developer of the SnapSVG animation library) talking about what’s hot in animation. Dmitry will be speaking on SVG animation at Web Directions Code 2014, in Melbourne May 1 and 2.

Around the Web, some other things you should investigate are

Pasquale D’Silva’s article on transitional interfaces, that lead us to him in the first place.

A detailed look at animation from a UX perspective, by Web Directions alumnus, Rachel Hinman.

Hot off the presses, Web apps deserve sexy transitions too, by Cemre Güngör. Some great real world design as well as technical information here.

There are also a number of tools in addition to my own AnimatR. Where AnimatR is all about helping you learn and explore CSS keyframe animations, these are more production focussed, and hide the underlying details from you.

• Adobe Edge Animate
• Sencha Animator
• Tumult Hype

And there’s a kickstarter project by Vicki Murley to develop an interactive ebook on CSS animation. Vicki previously published a fantastic book (we bought it!) on CSS transforms (something you’ll use a lot when using CSS animation)

So, what are you waiting for? Get animating.