Web animation was once thought of as just ornamentation. But as technology advances and internet connections accelerate, designers are embracing the practical benefits.
The sooner you recognize it’s full potency, the better.
Photo credit: http://www.denisechandler.com/
We’ll explain web animation’s 5 most effective uses, as well as what to expect the near future. But in order to understand where animation is at now and where it’s going, you must first know where it came from.
Like other recent design trends (minimalism, for example), animation has a rich history reaching far back before digital design.
Photo credit: http://en.nebo-studio.com/
Two Disney animators, Frank Thomas and Ollie Johnston, published one of the best go-to books on the subject, Illusion of Life: Disney Animation. The 12 principles outlined in this book still hold true today, and — with slight modifications — apply just as well to the web as to film.
While we explore each of these 12 principles in detail in Interaction Design Best Practices: Book 2, we’ll go ahead and give a quick overview:
- Squash and stretch
- Straight Ahead Action and Pose to Pose
- Follow Through and Overlapping Action
- Slow In and Slow Out
- Secondary Action
- Solid Drawing
These principles outline how to do animation right, whether with a cartoon dog or a window on a website. To see them in action, animator Cento Lodigiani recreated each one as a GIF using simple shapes.
5 Main Uses for Web Animation
As we mentioned above, animation has practical benefits beyond just visual appeal. Web animation creates a smoother and more polished user experience. Let’s take a look at some helpful tactics.
Animated effects help get your message across more clearly. As a communication aid, animation is most commonly used to reveal information, usually through hovering or clicking.
Visuals like a slow fade, a box crawling in from the side, or a UI card spinning to reveal more information are far more preferable than the content suddenly appearing out of nowhere. Animation makes the revelation less jarring — not to mention provides an opportunity to add some delightful character to your site.
Photo credit: https://www.flickr.com/
A popular example is Flickr, where the capture slowly fades in when you hover over the picture.
New information windows aren’t the only potentially jarring experience with site interaction. Switching pages, tabs, scrolling, activating buttons — all these can benefit from an animated transition. The eyes need the motion of animation to avoid an otherwise abrupt change.
Photo credit: http://www.takeitapp.co/en
The scroll-based site for the Take It apps uses transitional animations well. As you scroll down through the different pages…
Photo credit: http://www.takeitapp.co/en
… The same six photographs move and change with you. This makes moving through the pages smooth, comprehensible, and fun — plus it helps demonstrates the points of each page.
Because the human eye is attracted to motion, animation is the perfect way to announce a change. This is especially useful for ecommerce sites, as it helps recreate the instant gratification of in-shop purchases.
Photo credit: http://photojojo.com/store/
The Photojojo Store takes advantage of this by using an animated “+1” that flies to the shopping cart when users select an item. This also draws attention to cart itself, notifying users where to click for checkout.
The attention-grabbing property of the motion applies to more than notifications. It can also direct the user’s focus to any point on the screen. As long as there are not many other competing elements on the screen, even the slightest bit of motion will grab attention. That’s why the cursor in text fields blinks when idle.
Photo credit: http://www.spaceneedle.com/home/
Seattle’s Space Needle site takes advantage of this subtlety. Since the site’s upward scrolling seems counter-intuitive (but makes sense given the context of exploring the tower), they draw attention to the instructions with a minor — but effective — animation in the up arrows.
Sometimes animation can be used for no other reason than delight. Like we described in the guide Web Design Trends 2015-16, this is especially useful as a distraction from an otherwise unpleasant experience — such as loading time or a missing page.
Photo credit: http://humaan.com/about/
For example, Humaan uses animated backgrounds, scroll-activated motion, and hover-revealed text (in conjunction with the content) to add personality and humanity to what would otherwise be just another dull “About Us” page.