Animation on the Internet has come to the fore over the last few years as the tools that are available to create web pages and your website browser have become more and more powerful.
Animation should not be added just for the sake of us its use is twofold the most important are micro-animations that gives the visitor with cues on what is important and what to do next. For example, you might have a button that can shake or grow in size as you hover over it to indicate that you can click on it to go somewhere else or complete a transaction.
The second reason for having animation is to build a compelling experience for your visitor. These can be micro animations, or they can be large scale animations that provide an interesting visual to new pull you into the page. The trick is for the animation to make sense and to tell a story. Otherwise you could end up with chaos, and your visitor will get frustrated and head off somewhere else.
The example site on this page has been designed to showcase the services of a friendly, playful dog walking company. The initial animation is the most complicated at the top of the page, and becomes much simpler has the visitor scrolls down the page.
Remember the Mobile Devices
Visitors with mobile phones may not have the computing power to display the animation in the website’s header, and also cell phones can be all shapes and sizes, so a decision was made to replace the complicated animation with a static header image. The micro animations on the page have been kept there to provide are great user experience.
Dog Walker’s Website
I went a little overboard on the dog walker’s website to show how a page can be animated. As you scroll down, a scene is acted out by the elements on the page that tells the story of the dog walker taking her client’s dogs out into the mountains. As always, the page has been checked in all of the major browsers and on Macs and Windows and other devices to make sure that it makes sense to as many of your visitors as possible. Internet Explorer is no longer a current browser
Done properly, animation can greatly enhance your website’s sticking power and provide your visitor with a more interesting and cleaner experience.