*14-day free trial. No credit card required  Get started
Adding animation to your website: all you need to know

Adding animation to your website: all you need to know

 

Gone are the days when animation was used simply as an embellishment or a decorative element, on websites. Animation today is one of the most important elements of user experience and aids the creation of successful user interactions.

 

It is a powerful way to make the user interface of products clear and simple. In fact, it wouldn’t be an exaggeration to say it holds a place of honor in the field of UI/UX design. This is why animation is everywhere.

 

 

 

The Functions of Animation

 

The term ‘animation’ can mean a lot of things. It can differ in scale from the blur of a button to a fully animated background. Moreover, it can be set up as an independent element or as reactions to visitors’ actions on your website. The various functions that animation achieves on your website are:

 

 

 

Microinteractions

 

This type of animation is used to render small interactions, such as clicking a button, quick and clear to the user. Microinteractions can be implemented on a wide array of interactive elements, including buttons (hover, active, error, etc.), all the different kinds of loaders, knobs, switches, menus, calendars and much more.

 

 

 

Transitions and Page Behavior

 

Animation can be used to switch between pages and to make navigation easier by positioning elements on stage, morphing between graphic shapes or cutting between the different states.

 

 

 

Delighters and Decoratives

 

These catchy and creative visual elements are the final touches that go beyond the must-have elements of your website design. Exemplified by effects such as parallax scrolling, this type of animation is used to add some oomph to your website with the aim of improving user engagement. 

 

 

 

Animation on Your Website: To Add, or Not to Add?

 

When does it make sense to add animation to your website and when does it not? Here’s a primer:

 

 

 

1. To highlight actions using micro-interactions

 

Microinteractions essentially mean simple animations which are associated with single-use cases. They make website elements easier to use by providing you with visual feedback when you interact with one as well as information on how to use it.

 

But which of the numerous elements on your website should you animate? Here are a few thumb rules. Use animation to highlight it when you turn a feature on or off, to highlight critical information, such as the price of a product, or icons on your website, and to signal the success of an action taken by the user.

 

microinteractions in website

GIF Source

 

 

 

2. To reveal hidden and drop-down menus

 

Hidden and dropdown menus both lend themselves well to animation. The latter works particularly well if you’re juggling a large number of pages. In both cases, using animation works well as it softens the reveal of the menu. Without animation, these menus would appear on the screen too abruptly.

 

Some types of animation that can be used for dropdown menus include fade, expand, slide, and flip animations. Hidden menus too can be animated in a number of different ways. 
 

 

 

3. To reveal hidden information

 

Hidden information can be revealed using hover animations which offer you a neat way to maximize the utilization of the limited space available. For instance, mouseover effects can be added to the gallery items to reveal additional information about them. Hover animations can also be used as micro interactions to know an element is active or how to use it when a user mouses over it. 

 

 

 

4. To create sliding galleries

 

This is probably one of the most common uses of animation seen today although people rarely realize they’re looking at simple animations when they’re browsing from one image to another in a sliding gallery. In the absence of animations, this transition between images would be too abrupt and jarring, thereby rendering the experience less than user-friendly.

 

The use of sliders is often seen on the top of webpages but don’t be afraid to use sliders in less conventional places too, such as to display testimonials.
 

 

sliding galleries in website

GIF Source

 

 

 

The Do’s and Don’ts of Adding Animation to Your Website

 

 

1. Understand the basics of animation

 

And we have them for you right here. From the seminal book The Illusion of Life: Disney Animation by Ollie Johnston and Frank Thomas, here are 4 basic, time-tested principles of animation that’ll hold you in good stead throughout your journey with it.

 

 

 

#1 Squash and Stretch

 

Essential for portraying motion, this all-important animation principle shows the energy behind a movement. For example, to show a bouncing ball, you would draw it flat or squashed at the lower part of the bounce and then stretched as it bounces upward instead of using perfect circles throughout.

 

 

 

#2 Anticipation

 

In the real world, someone that’s about to jump will crouch first, and a baseball pitcher who’s about to pitch will wind up first. This rise or build-up before reaching the crescendo, that is, the action itself, is termed anticipation. It lends realism to the action, apart from preparing the audience for it. Also, a longer build-up signifies a more weighty action.

 

 

 

#3 Staging

 

The presentation of an idea so that it is clear to the audience is known as staging. Given there’s only limited time, an animation should use every frame to convey the character’s attitude and reaction with the aim of driving the plot forward and also show as much of the character as possible. For instance, fatigue can be shown using slumped shoulders.

 

 

 

#4 Pose to Pose and Straight Ahead Action

 

Most animations draw from both these principles that bring different types of energy to them. The pose-to-pose method uses a number of fully fleshed-out frames of animation. It offers the animator better control over an animation which works wonders for emotional and dramatic scenes. Meanwhile, in straight-ahead action, each frame is drawn out in sequence with the frequent blending of scenes. This method is useful for scenes that portray fast action.

 

 

 

2.   Define the purpose of adding animation

 

Add animation only when you can define a concrete and specific purpose for it. That is, one way or another, animation needs to perform a task that takes you one step closer to achieving your goal, be it maximizing the time users spend on your website, users performing certain actions, or something else.

 

Some of the key ways in which animations help are by:
 

  • Supporting your storytelling by slowly revealing website elements, 
  • Aiding user movement through the website, 
  • Visualizing your product’s use cases, function, or impact, 
  • Breaking your website’s static scroll using motion, and
  • Creating an atmosphere that is suitable for certain types of products, such as toys or kidswear.


 

 

 

3.  Simplify your content using animation

 

Animation can be used very effectively to simplify the content you want to present to your visitors. Let’s say you want to explain how your SaaS-based product works. You could do this through a number of mediums: 
 

  • A couple of paragraphs of text,
  • A few bullet points of text, or
  • A few key visuals of animation.

 

 

Studies have shown that the human brain processes visuals a whopping 60,000 faster than it does text. Is it any wonder then that the last option above is the best?

 

 

simplify content in website

GIF Source

 

 

4. Focus on elements that can be animated

 

While some website elements lend themselves particularly well to animation, others just don’t. Those that fall in the former group include elements that:

  • Trigger specific actions, such as navigation buttons and CTAs,
  • Provide directionality, such as arrows and background scrolling,
  • Draw attention to themselves, such as new notification icons and ‘complete order’ buttons, and
  • Loading bars

 

 

Website elements you don’t want to animate include those where the animation will harm its functionality, such as:

  • Text that becomes harder to read when animated, and 
  • Fields where visitors have to key in information as animation would distract them from the task at hand. 

 

 

 

5. Provide visual feedback using animation

 

A lack of user-friendliness can drive visitors away from your website. For this reason, it is always better for your users to receive feedback on completion after performing an action on your website. Visual effects do this job best. 
 

 

 

6. Don’t create long animations

 

The typical internet audience has a very short attention span. It makes sense, then, to tell your story in as short a time as possible and not expect the audience to be prepared to consume lengthy animations. 
 

 

 

7. Don’t go overboard with animation

 

As in life, so in animation: too much of anything is a bad thing! It is of vital importance that you hold back from overdoing the animation bit. For one, you don’t want to distract your users with too much action. Too much animation will also make your site heavy and can slow it down.

 

 

Wrapping Up...

Whatever you choose - a few touches or an overall makeover by adding animation to your website - animation plays a major role in enhancing the user experience by increasing interactivity and user engagement. Don’t miss out on what animation has to offer your website, try out animation today!
 

 

About the author: Koushik Marka is the founder and CEO of Studiotale, a video production company. He is passionate about helping brands grow with video and has expertise in video marketing, 2D animation, and vector illustration. When he is not working, he loves playing video games and traveling.

 

 

14.06.2019