Web Animation is Back!

10/11/2015

Animation is not new to the web and once exclusively existed as flashy, distracting elements that would drastically slow down page load times and had only one purpose – decoration. However, further development in technologies such as HTML, CSS and JavaScript, the use of animation on the web has become a growing trend.

When used with subtlety and sophistication, animation can shape an engaging and effective user experience. By providing a response to an action such as the click of the mouse, or hovering over an element on the page we can assure the user the task they have performed has resulted in a response.

Google’s popular material design language indicates that motion should mimic the behaviour of real world objects, observing that motion can demonstrate weight, flexibility, rigidity or scale. Offering the user clues can inform them of how they are intended to interact with an element. For example, many website use a shaking effect as part of a login form to indicate details have been entered incorrectly; from real world experience this replicates the motion of a head shake.

Ways of using animation on the web:

element animation - feedback on an action such as a click or moving the mouse over an element.

waiting animation - these animations assure the user that something is happening in the background, they can take the form of a ticking clock or a progress bar.

storytelling - built with the intent of impressing the user, often the user interacts by scrolling. Little can be said for improving the user journey but these types of animation can make a topic more intriguing and engaging.

navigation and menus - created to replicate real world direction in order to help the user move around a site.

If you’re interested in how your website could benefit from animation, why not contact us and chat to a member of the team.