Everyone has an opinion.
Here's mine. What's yours?

The JoeJoomla Blog

Everyone has an opinion. Here's mine. What's yours?

A Little Animation For Your Website

Is there an unused animation style sheet lurking in your site?


Are you missing the opportunity to add interest and emphasis to your content using animation?

Is there an animation style sheet or JavaScript file lurking under the hood of your website just waiting to be used? Most modern content management system (CMS) templates include some sort of animation capability. This means you can add animation effects to headlines, images, paragraph blocks and single words in the articles you publish to give them extra pizzazz. It’s a great way to highlight and emphasizing certain aspects of your content.

Even if you don’t have an animation file in your template you can easily add one like animate.css from

What should you use animation for?

I remember when content first started to be published online, the best websites attracted their readership with the elements of education, information, and entertainment. Animation can add the aspect of entertainment very easily.

Why do we need entertainment in our content? It’s because it is effective. Some of the most popular communicators weave an incredible sense of humour into their message. People are generally attracted to and remember things that give them enjoyment. How many times have you heard the statement “he makes me laugh”?

Don’t let your animation become annoying.

Some websites abuse the use of animation. Have you ever been lured to a site by a really captivating link only to land on a page that is in constant motion with popups and videos appearing and disappearing? It interferes with the content you are trying to read by moving it all around. Finally when you get fed up and want to leave the page, another pop up appears in your face shouting “DON’T GO!” Remind me not to visit that site again. This is like a person at an event that has no idea of social graces or when they’ve crossed the line to just plain rude. You want to get away from them. Don’t let your animation become annoying.

You also need to know your audience when you are using animation. If your readership are mainly using low end mobile devices then animating your pages doesn't make sense. For certain types of website content animation should be avoided altogether. It may be inappropriate to animate a web page dealing with obituary listings. Use some common sense.

CSS or JavaScript animation?

CSS can only do simpler animations. If you want to animate an element with complex timing and scaling you are likely going to need to do this with JavaScript. You can’t have an element scaling back and forth continuously and then suddenly make it rotate on rollover using CSS alone.

How do I implement animation in my website?

When you approach the idea of adding animation to your website work with a good designer to see what makes sense for it. Then you’ll need a knowledgeable person who knows how to add the necessary classes to the HTML content you are animating. It’s not that hard. If your site didn’t come with an animation style sheet and you need to add one be careful that there aren’t conflicts with existing style sheets using the same class names.

Hopefully there’s an animation style sheet just sitting there waiting for you to bring it to life!

Go To Top