When Animations meets Webdesigns!!

Animation is no longer the delightful surprise, it is a necessity.

The word “Animation” derives from an ancient Latin word “Anima” that means “Soul.” With animations, you put soul into objects, pictures and websites. It is the way we can capture life in our art.

Today animation have become deep rooted in web design and is a great addition to any website element. However at times we might overdo it, there is an extremely thin line between doing it correct and overdoing it.

When used correctly it gives users, the feeling of individual connect and a design which is interactive. Let us take a walk through these basics of Animation.

What is an Animation?

The word Animation, as mentioned above has latin origin and which means “the technique of photographing successive drawings or positions of puppets or models to create an illusion of movement when the film is shown as a sequence.”


Animation triggers the feeling of interaction with physical objects and in a way it’s recreating what we observe in a different manner. Animation, in the context of digital products like websites and apps, pretty much refers to anything that moves or transitions once the site or app has loaded.

One of the most important things about animation is timing. Timing gives physical and emotional meaning to an animation. The animator needs to use timing to give the user the right feeling and perception. Is the animation fluid? How fast is it? What kind and how many keyframes should be used in an animation? What reaction is caused by interaction, and how fast does the reaction come after interaction?

If the animation is not fluid (has problems with the timing), the user could perceive it as a bug and lose motivation for further exploration of that particular website.

History of Animation

Animations came into existence in 1987 period, with launch of .gif files this is the period when a hopping baby or flying bird would just come from nowhere. During the 2000’s flash came into the picture and was in the prime of its stardom for a period. This in when motion and pictures became one. A simple, free, flash player was easily accessible and was immensely popular. This led to each and every web designer making sites with flash. As we know with great power comes great responsibility, and web creators were consumed and overwhelmed with possibilities, resulting in websites devolving into style over substance.


Somewhere during this period, users started getting bored with the continuous animation as it was hampering the overall system performance.

As time went on, many designers moved over to JavaScript-based animation for the smaller things, like drop down menus and other navigational elements. By the 2009, CSS animations came into picture

Today, our technologies are at a place where we can create animation more effectively with end technologies like CSS3, Javascript, SVG, and HTML Canva. These tools help designers to make unique, mesmerizing and beautiful animations quickly.
We know “All that glitters is not gold” so it is extremely important to determine whether to use it or not. Let us have a look on some pros and cons of the animation

Types of Web Animation

It’s obviously not enough to throw animation at our web page elements and hope it improves our conversion rate. That would be silly. Like every other aspect of design, what kinds of animation you use, and when you use them, must be carefully considered.



Interface element Animation

This is that animation which tells the user that their action has been registered. For example, if you click on a navigation, this animation will acknowledge the action and indicate that there is work in progress for the relevant call to action.

Waiting Animations

The utility of these animations was proven a long time ago, when graphical user interfaces were first invented. It started with the way the mouse cursor would turn into an hour glass, and progress bars, too. At some point, and windows showed files flying gracefully from one folder to another.

When people start to wonder what’s going on, they keep clicking, or tapping. It might be an expression of frustration. They might believe it actually makes things go faster.

Either way, telling your user what’s happening, even via a simple progress bar, can ease the mind considerably… even for those of us who’ve been using computers a long time.

Story-telling Animations

Now story-telling with animation goes beyond cartoons. In fact, I’m not talking about those at all. Rather, some people design websites so that as a user interacts with them (for example: by scrolling down the page), animations are triggered which tell a story.

The effectiveness of these animations is… debatable. Typically, they are not intended to improve usability, but to impress the user, and give them some context for the subject of the page. They might be trying to show off the craftsmanship of a product, or share the experiences that led to a company’s creation.

Purely decorative Animations

For better or worse, some people put animation on their site that serves no purpose other than to be seen. Is it worth it?
The answer to this is Yes and No?

It is just for display, do it only and only if your business demands it and it would help your business. The animations should help visitors convert into leads and customers.

Animation in advertising

Animation in advertising can be a boom or curse for the users. But it’s almost unavoidable. If you want to make people look at your ads, animating them is a great way to go.

Though the user experience will no doubt vary depending upon the usability and product features.

Tips to help you decide

The decision to use animation should be treated as any other design decision; you have to weigh the pros and cons and make sure that the user experience is not compromised, and that you won’t be stuck with a lot of inefficient code (which you may have to tweak and update later on).


It is important to consider these points before you go ahead.

  • Check whether or not animation will affect the user experience
  • Closely examine the existing design (if available)
  • Take a look at the target audience and its hardware platforms
  • Check the site load times and CPU load
  • Examine other alternatives
  • Always keep usability in mind
  • Will the animation require extra resources (i.e. extra code/images) that will increase the load time, thereby harming the user experience?
  • Does the animation improve the user experience of the site in a functional or delightful way?
  • Is it even possible to create the animation using modern programming?

What i mean to say is “don’t use animation, just because someone else is using it. Use it because your business and audience need it.

Leave a Reply

Your email address will not be published. Required fields are marked *