It’s really hard to choose the best animation, or not choose one. In fact it’s hard to know if an animation will add something to the user experience or will just amuse user.

A timely article as almost by default animations are creping into everyday work. Just look at any front-end framework and they will be using transition and other subtle animations. I think it is those subtle animations that are the easiest to miss, leading to inconsistent implementation; and that jars.

Nicolas Chevallier – I always approach animation thinking ‘include it to imply meaning’. If the animation does not help to explain what is happening more often it is purely for humour or a nicety. If speed and optimization isn’t key this can be fine as animation here and there helps to lift potential user anxiety.

“Before you begin throwing animation at all the things, establish the character you want to convey.”

This sentence speaks volumes. Unnecessary animation can kill effectiveness and purpose. Subtlety and consistency are the name of the game so keep it short, sweet, and on brand.

Good ideas here, except animating logos and brandmarks worries me :)
I’d argue you don’t need to draw the eye to a logo (unless it’s part of the content), but I agree it can add some character on a static page. However, subtlety is the key here as you mentioned.

It is so true that style guides play an important role in maintaining consistency. Before I use to design elements as and when needed and as things grew, then only did I realize that I should’ve taken the time to create a guide.
Thanks for the tutorial, was looking to spice things up on a new design I’ve been working on.

David

Style guide might explain why we chose a certain font or layout, we can use style guides to explain the intent behind animation. This means that if someone else wants to create a new component, they will know why animation applies.

Great!

I have recently been taking animation out of my project. One example is a large navigation dropdown on desktops. This used to fade in/out on hover, but it appeared slow even though it wasn’t. Remove animation and the whole navigation feels snappy.

On mobile however, each subsection slides in/out on tap giving a nice traversal feel.