Contact Info Contact Info
(+632) 654 0001
Unit 3101 One Corporate Center, Julia
Vargas Avenue, Corner Meralco Avenue,
Ortigas Center, Pasig City, Philippines

Our Blog


Back to Basics: Do’s and Don’ts for Efficient Web Animation

Could you recall the first time you made an animation?

Animation has been a long-time goal for artists. The dream of making drawings move and come into life has been an achieved and even pushed into limits in this technological era.

From a simple drawing depicting multiple limbs to show motion, to television and films, animation also penetrated computers from GIFs, slide presentations, and now in web-based media. Animation has been ubiquitous. It can be seen anywhere digital.

Animation in web was not made just to be an attention-seeking visual element, it also serves as an important tool in aesthetics advancement, conveying message, and improved the general user experience.

However, animation in the World Wide Web could be more distracting other than being a web design piece if either it’s overdone or done for nothing.

To further explicate, here are some things to remind our designers to achieve a well-balanced web animation.

Don’t slow down the page.

If the animation would cause the page to load twenty seconds, you might cause the early death of your website. Try to make the animation light but functional. Also, do consider users of small-screen smartphones.

Do guide the user.

Remember MS Office’s paperclip assistant or the flying folders that you see while your file is being copied? Guiding users is one of the biggest functions of animation. Informing the users that the content is loading or where to click next, using animations surely improves user experience.

Don’t be too loud.

The use of bright colors is popular in web animation in advertisements. Its sole purpose is to draw attention. So if you intend to make it astonishing, yet it shows no purpose, like using animated background colored with neon hues and patterned, don’t wait for visitors to click the X-button of their browsers.

Do install ‘stop’ function.

Whenever appropriate, especially in modal boxes and pop-ups, put an “X” or stop button. Give choices for those who viewed or those who don’t have time to view the whole animation.

Don’t overdo it.

Why do you need to put a swinging text box? Would it be better to use a color traveling in the outline of the text box to highlight the content? Does it need to look as formal as a Power Point presentation? What’s important is its appropriateness and the way it fits to the purpose and to the content. Some of the websites and online ads overdo animation, especially in buttons and calls-to-action, that gives an impression of dire need to be clicked—and that’s their purpose in doing it.

Don’t make it long.

The rule of thumb is, when you think of the animation length that you will produce, you cut it in half, and when you revise it, you cut it into another half, especially if you intend to do a full website animation, wherein the front page’s space is occupied from corner to corner with the moving graphic.

Do make it as the center focus.

It’s a no-brainer that two or more animations moving at a time without transition or harmony is not good to the eye. There are still websites today that displays multiple animated buttons with same calls-to-action, which intends confusion to the user.

Do tell a story.

Again, if you intend to make a certain animation be the central focus of a website, maximize the time and space. You might as well create a unique storyboard and characters. Create an animation as if you are making a short animated film or a game you aimed to develop. Some websites blend scrolling with the content and animation to tell a process or a story creatively.

Do have fun and make experiment.

Don’t forget to love your craft. Play with your awesome ideas! Creativity bursts whenever you explore your own style while seriously having fun.


Animation surely gave rise to the motion design in the web-based media. Either you put it on the foreground or in the background of the website, or in internet advertising, large or small, realism or flat, don’t take them for granted as a mere web design tool or a trick to impress. Quoting from, “Even pure visual should have a goal”. Web design isn’t just the façade, it must have a personality that reflects the entity it represents.

Tags: , , , , ,