It can be tempting to go over the top with web animation when you have the skills. At the same time, animation can be easy to forget about when you’re working on more down-to-earth projects. But I believe simple animation can work in just about any web design and really bring it to life. I’ve found five great examples of animation in web design that are subtle, classy and effective.
The design of this site is already gorgeous. Add in a bit of animation and it propels the design to awesome status. Scroll down the page and you’ll see a simple animation of the fat man walking. Use the navigation to skip to a section and he jumps to it.
Are you making your way from print design into the digital design space? HOW Design Live in San Francisco, June 22-26, offers a dedicated Print to Web track just for you. Hear from speakers including Patrick McNeil, Chris Converse, Mario Garcia, David Sherwin, Jose Caballer, Terry Lee Stone and more.
This design becomes more and more impressive as you experience it. The expressions on the person’s face at the top of the page changes as you mouse over the navigation. When you select an element to navigate to, the page smoothly scrolls to the content and an animated “return to top” link slides in. The animation here is a great touch that enhances usability and juices up the design at the same time.
It’s subtle, but the thin colored dividers at the top and bottom of the page continuously slide to the side. It’s a type of frivolous detail I wouldn’t normally care for, but something about it grows on me. I really love the animated logo: Mouse over it, and it wobbles back and forth.
This focused site puts the product front and center with a hero shot—pretty standard. However, as you move your mouse around, you get a nice subtle parallax effect that draws attention back to the main product. It adds a little fun and places the focus back on the product should your eyes begin to wander. I love that the effect is so clearly combined with the core focus of the site. Thoughtful, subtle and effective!
In this final example, the main navigation and logo animate when you interact with them. The main logo simply shifts down a bit, and the menu items animate to reveal submenus. It’s a simple touch but just the thing to make your work as awesome as possible.
How to make it happen
- PageScroller: This awesome jQuery plugin makes simple work of fixed page navigation and smooth in-page scrolling. Worth considering if you’re working on a smooth one page site.
- Spritely: Sprites are a foundational element of computer animation. This simple and effective jQuery plugin makes them easy to add to a site. Be sure to check out their gallery of sites using the plugin for more ideas.
- Roundabout: Another handy jQuery plugin that turns an everyday list into an interactive set of rotating content. Be sure to check out the demos.
- Firefly jQuery animation plugin: While this technique and tool are rather specific, it can still be handy if it works for you. This tool produces slick particle animations (or sparks as it calls them). This is easiest to understand from a sample site using them.
- Color animation jQuery plugin: Animating color isn’t something we might think of. All the same, this nice jQuery plugin makes it easy as possible.
More resources for web designers
Learn how to add animation and other interactive effects to digital projects in the Intermediate Adobe Digital Publishing Suite online web design course taught by Brian Wood.
Stay in touch with web design trends including web typography, animation, interactivity and more with Patrick McNeil’s design tutorial, The Trend Report.