Bring The Web to Life With Natural Animations

People react positively to things they understand — and they remember what surprises them. By utilizing animation, you can take a website from the expected to the unexpected. And by applying lessons from real life, you can ensure your animations feel natural and relatable.

From loading sequences to web page transitions to interactive presentations, there are endless opportunities to add a level of polish and professionalism to your web presence that competitor websites are lacking. Here are several key benefits from a well crafted web animation:

• Increases Engagement – Engagement is increased when the user is surprised, but never confused. Animations can show a user how to use an interface, and can add the desired level of surprise.
• Directs Attention – Our instincts are to track motion with our eyes. Using this natural response you can choreograph the user's attention.
• Creates Emotional Responses – The objects you animate can have human characteristics and personality. They can be whimsical, they can be assertive, they can funny, they can be sad. How you move objects and how they respond to other objects, creates an emotional response in the viewer. Emotions strengthen messaging and branding — and, obviously, increases engagement.

The benefits of well-crafted animations elevate your brand, and help people interact with your company in more memorable and engaging ways. But, benefits are only realized when animations are executed well. Poorly executed animation can do more harm than good. Character, personality, and adherence to the laws of physics will help to create animations that allow users to understand their movements.

Principles of Natural Animation

One of the most comprehensive and respected guides to natural animation is The Illusion of Life, written by Disney animators Ollie Johnston and Frank Thomas. The principles they defined have become the foundation of effective animation in everything from hand-drawn cartoons to computer animated feature films to 2-dimensional web-based animation.

Cento Lodigiani created a video which does a great job summarizing these principles:

Interfaces as Physical Objects

For most web projects, you are animating interface elements like buttons, menus, containers, etc. How do you apply natural animations to this context? This is a question that has been explored — and will continue to be explored — by many organizations. Recently, one of the best sources of insight into this topic is Google’s Material Design. This resource was originally created to provide guidelines to app developers, but the principles outline there (like the concept of viewing web objects as physical materials) can be used in a wide range of applications, including animation for any web interface.

Adding well-polished animation and applying these concepts to your website is more than a feat of engineering — it’s end goal is to improve UI and improve your business. Give it a try and watch your conversion and engagement metrics improve.

And, yes, there are times to break the rules. Sometimes animations should go against nature, but just like a good writer — you must know the rules before you can learn when to break them. Contact us to continue to the conversation.