Animation Inspiration


In mobile and touch devices, animation has been gradually becoming more and more prominent to enhance the experience. Users are experienced with smartphone and digital interfaces. We have lost the skeumorphic need to relate back to physical objects, indeed iOS7 took away a little too much.

Perhaps its a concession that our devices are more powerful and we multi task much more now devices are more capable and apps more specifically focused. Visuals need to accommodate for that layering of tasks.

A new direction?

At this years Google IO event, Android ‘L’ introduced Googles new ‘Material Design’ principle. A visual and user experience framework, rooted in physical properties but with clever use of animation to reinforce elements of user interaction.

Motion is meaningful and appropriate, serving to focus attention and maintain continuity. Feedback is subtle yet clear. Transitions are efficient yet coherent. Google Material Design guide

With the showing of Googles new material design, a new trend for animation, parallax and ‘meaningful transitions’, animation is here and likely to become more prevalent, leaving behind the skeumorphism before it.

Things that move

Modern browser support for CSS3 and the relative simplicity of implementing complex effects meant many of my coding experiments have featured transitions.

Heres a re-cap:

Expanding Line Nav

Using movement to show current focus. Link markers expand to form various fill styles, before returning back to become a simple tab or page marker.

Hop Over Notification Badge

A charming hop effect for showing / hiding some secondary info, totals, tool tips. The digital opacity fade in has no soul, why can't something hop over to meet you.

Animation plays a part in many of my demos

Other examples of my work which may inspire animation in areas you might not have considered are the still popular Excerpt Peek and ‘PF’ Logo to Chart. Check out the rest of my blog for more of my experimental demos.

Get animated

I also recommend checking out Codepen for ‘Material design’ or the Material tag as people begin to experiment with this new style of layout and interaction.

If you want to get into the new methods of thinking about interaction, a site that springs to mind is Don't Click, where you click and you lose the challenge.

Or this chaps concept for a ‘Visa Versa’ that is designed diagonally for thumb operation.

Plenty to consider and inspire some visual interaction.

All Posts