This year animation is poised to make a triumphant comeback. For those of you that can remember the early days of the web, pixelated bouncing balls, blinking animated gifs and the ever annoying scrolling marquees were littered everywhere… This is not a return to those but rather functional and aesthetic animations. Animation reinforces hierarchy, relationships, structure and cause and effect. It enhances the user experience making it more intuitive and in turn making the user more confident in its use. Subtle animations can give a website just the touch of magic it needs to make it a truly engaging marketing tool.
The rise of GIFs. At the forefront of the rise of web animation is the humble GIF. The GIF has experienced a sort of renaissance in the past few years. From Cinemgaprahsanimated UI elements to UX concepts, GIFs are back in a big way. GIFs are a beautiful mix of images and video, which makes them perfect for web. They’re short and easily digestible by today’s mobile centric web viewing audience. Web designers have also resurrected the noble GIF as a tool for creating interactivity on the web. They are easily created, they have small file sizes and they provide the use of transparency… Perfect for adding small interactive pieces to your website. UI / UX designers are also leveraging GIFs as a way to show off concepts and design mockups.
Exploring how to create animations. In the wake of Steve Job’s death blow to Flash in 2010, web developers have explored other alternatives to creating animations for the web. The CSS3 specification brought with it many new tools for web developers but didn’t provide the flexibility to create complex animations. So developers used the magic of JavaScript to fill in the gaps. This has left the web animation landscape a fractured mix of animation libraries. However as I write this, support is gaining for a new web animation standard, the Web Animation API. This standard could help usher in a new era in high performance web animations… But like all web specifications its browser support is inconsistent.
Google’s advice. Probably one of the biggest players in the push for more expressive web animations is Google. With the release of its Material Design recommendations, Google outlines the dos and don’ts for creating meaningful animations in the digital world. Animation that is, according to Google, “… not only beautiful, it builds meaning about the spatial relationships, functionality, and intention of the system.”
As the need for expressive web animations increases and the tools to create them become more accessible we are sure to see an explosion of animation across the web. Native app developers have been using these animation techniques for some time and now it’s time for the web to catch up. As broadband and Central Processing Unit speeds increase the possibilities for complex animations will also increase, turning the web from a land of static pages to a wondrous world of websites and web apps that truly come alive.
What graphic animations does your company use?
