• IT
  • DE
  • EN
Go to content

The enduring fascination with web animations.

Published by Incomedia in Web design · 20 August 2020
Today, you went online, browsed a bit, used Facebook, WhatsApp, and YouTube, and saw at least one meme, animated GIF, or video, although most likely you saw far more than one. In fact, hardly a day goes by in which you don't see and share at least one. We all do: the rate at which animated content is shared and goes viral is now extremely high.

But what is the basis for the success of this kind of content? Most importantly, how can you use it effectively in your websites or social media platforms to raise your profile and promote your business?

We'll find the answers in this article.

Animations and video clips: why do we love them so much?

Let's start here: have you ever wondered why you like animations and video clips so much? It may seem strange, but this is a question for your "Old Brain".

Although this may be a blow to the ego, remember that as much as we like to consider ourselves to be civilized and highly evolved people, our prehistoric instincts, from a time when we had to fight to survive in a hostile, dangerous world, are still part of us.

This has been made clear by neuroscience research which explains that our brain is divided into 3 parts:
  • The New Brain – this is the most evolved part, which processes facts and allows rational thought;
  • The Middle Brain – this is the part that handles feelings and emotions;
  • The Old Brain – the lizard brain, the most ancient and primitive part which, however, checks the information transmitted from the other two brains and makes the decisions that determine your actions.

The Old Brain has 6 key characteristics:
  1. It's egocentric
  2. It's sensitive to strong contrasts
  3. It's concrete
  4. It's good at remembering the beginning and the end, but not the middle
  5. It's visual
  6. It reacts to strong emotions

This explains why we're so drawn to videos and animations: they're moving images, and our Old Brain is wired to react immediately to these kinds of stimuli. After all, in prehistoric times, sudden motion could mean only two things:
  1. "Look! There's food."
  2. "Look! You might become food."

Either way: " Look! Do something right now: attack or flee."

That hasn't changed: movement catches our attention and demands a reaction. Once you understand this mechanism, you can use it to your advantage when creating web pages and promotional campaigns.

Animations: a brief history

This may surprise you, but the captivating power of animated images is so great that their story is as old as mankind.
The oldest known example of an animation is in fact a 5,200-year old terracotta bowl found in Iran spinning: it reveals that the 5 scenes painted on the bowl reproduce the movement of a goat jumping up to snatch the leaves on a branch.
In ancient Egypt and China, people cast shadow shows onto walls.

The end of the 1600s marked the arrival of the magic lantern, which led to fantastic-sounding devices called thaumatropes, zoetropes, and kinetoscopes, which finally led to the Lumière brothers' much more successful camera, using photographic film, rather than drawing strips, to create the illusion of movement.

That was at the end of the 19th century: from there, it was only a short step to developing animations for the cinema, and finally, for the web.

In the late 1990s, the web was a euphoric place, teeming with mind-blowing Flash animations, which were considered truly cutting edge. Then, once we all calmed down, we started to pay more attention to websites'  performance and to reward usability rather than the power to amaze. Flash animations were becoming too heavy and weren't compatible with mobile browsing, which is when they became obsolete.

Today, thanks to the wide variety of development methods and tools, site creators have once again begun using motion to draw visitors' attention, but they're doing so with more awareness and restraint than before.
Why? Simply because it's still true that animations can:
  • grab people's attention;
  • make everything more attractive and enjoyable;

if used wisely, help users perceive changes and indications which can help guide them as they navigate.

Animations: Functional or Delightful?

From what we've discussed above, it's clear that not all animations are the same. In other words, there are animations that serve to explain a feature, provide feedback, or anticipate certain behavior, and other animations that simply serve to make browsing a website more fun. The first kind is known as functional animations: these are part of the field of interaction design. The second kind is called emotive animations: these animations are more related to motion design.
Some examples of functional animations on web pages include the transitions between screens, as well as "micro-interactions", such as when a button becomes slightly larger when you hover your mouse over it.

There are even more examples of functional animations in the apps you use on your smartphone: pulling a page down to refresh it, loading displays, swiping from one content to another, etc.

The key factor is that these functional animations aren't just used because they're pretty, but mainly because they can improve a concept or a process.     

All other kinds of animation are emotional animations. Although they don't have the same purpose, they can still be useful, even if only because they reinforce the brand's identity and make the user experience more pleasant.

Emotional animations can be simple or complex: they help you tell a story or illustrate a message effectively and quickly. That's why they're not just perfect for enriching your website, they can also be used in your blog posts or on social media, where everything needs to be immediate and impactful.

Ok, but how do you create animations?

The starting point for anyone looking to create their own animations isn't necessarily learning how to use a specific tool, but rather gaining an understanding of the principles of classic animation. These fundamentals, by two of the biggest Disney animators of the 1930s, Frank Thomas and Ollie Johnston, can be found in the 1986 book "The Illusion of Life."

Based on their vast experience, Johnston and Thomas believe that animation's power comes from its ability to create the "illusion of life", as long as you follow these 12 principles;

1. Squash & Stretch
2. Anticipation
3. Staging
4. Straight ahead action and pose to pose
5. Follow through and overlapping action
6. Slow in and slow out
7. Arc
8. Secondary action
9. Timing
10. Exaggeration
11. Solid drawing
12. Appeal

In fact, following the basic laws of physics, like gravity, reactions, and time, can result in more realistic animations, which not only improves their ability to tell a story, but also:
  • indicates causality  → if you click on this button, the form disappears
  • provides feedback  → if you click on this button, it remains pressed down
  • represents a relationship  → zooming in on a point on a map provides more information about its physical location
  • indicates progression  → like a loading bar, for example

... and much more.

In all of these examples, animations guide us through interactions, helping us to understand relationships, structures, and cause and effect. In other words, animations enrich communications with sensory input, which helps us better understand the situation and interact appropriately.

So don't just think of animations as decorative features that add a cute touch to your website. If you design them carefully and use them wisely, animations can significantly enrich our communications, making them more appealing and effective.

Back to content