One of the most requested items we receive from new clients is for the incorporation of animation or some kind of motion graphics into their new website. People always seem to be wowed by websites where content slides around or a blob morphs into a logo. I'll admit these types of things can be quite interesting, but are they really worth the huge amount of time it takes to create them? Can motion graphics be implemented in a manner that will more effectively deliver a message?

Animation Without a Purpose
If I have learned anything at all about design, it's that design without purpose is meaningless. In other words, to have animation on your website simply because it's trendy is a waste of resources. Actually, one might even argue that it could even be a negative factor that could drive traffic away from your website.

Take a moment to think about the last time you visited a website with audio that played automatically. If you are like me and many others, your first reaction may have been to find the mute or off button as quickly as possible. In my experience audio mixed with animation on a website is a recipe for lost traffic. That’s not to say that all use of audio is bad.

Audio can be a very effective tool if used properly. A good example of this would be a photography website where the music and soft transitions actually draws the visitor into a deeper experience. While music may work for a photographer, it may not work as well for a corporate type website. Motion graphics that highlight key marketing points typically work well here, sans audio.

Good Intentions, Bad Delivery
Motion is great for capturing the attention of a website visitor. The human eye is extremely sensitive to motion, so it only makes good sense that moving an element on a web page is going to draw a lot of attention.

Keeping this in mind, too much of a good thing can quickly turn into a bad thing. Too much animation can be distracting as well as frustrating to your website visitors because it creates a struggle to determine the priority of the content.

Distractions aside, more animation also means more load time. Many of us have a low tolerance level when it comes to waiting for elements to load on a website, so a good rule of thumb to remember is that less is more.

New Techniques
Traditional animation techniques on the web required use of specialized animating software like Adobe Flash or Microsoft Silverlight. Much has changed in the development of motion graphics for the web over the past couple of years. There are many new JavaScript tools and libraries available today that are making the creation of motion graphics much easier and less time consuming than previous technologies.

JQuery is a good example of the new JavaScript components that provide practical applications like transitions between images, sliding text, and object effects. Even modal dialog boxes are much easier to implement and give a rich, user experience without a lot of development time.

Here are just a few more examples of what can be accomplished with jQuery.

Navigation
http://adrianpelletier.com/sandbox/jquery_hover_nav/
http://colorpowered.com/blend/

Content Showcasing
http://buildinternet.s3.amazonaws.com/live-tutorials/postcard/index.html
http://visitmix.com/labs/glimmer/samples/freestyle.html

Background Images
http://youlove.us/
http://themeforest.s3.amazonaws.com/116_parallax/tutorial-source-files/tut-index.html

Data Visualization
http://highcharts.com/demo/?example=line-basic&theme=gray

Modal Dialogs
http://www.ericmmartin.com/simplemodal/

Another bonus to these new JavaScript libraries is that they can be easily integrated with data-driven websites that allow the content within the motion graphics to be editable, providing the ability to deliver fresh content in an engaging manner on your website.

In Conclusion
Motion graphics can be a very effective and affordable way of delivering content on the web if used correctly and with the correct technology. Hopefully these tips will help you decide what is right for your website.