Design Trend: Motion in Web Design 

Animation, video backgrounds, GIFs, and all the fun hover states in-between.


Animation is stupidly popular in web design right now. 2014 in web format looks a little something like a couple GIFs melded with some autoplaying video, coupled with subtle hover animations over buttons and forms.

Showing How It Works

We’re seeing a lot of animation used to show how a product is made or how it works.

Landing page for Facebook’s new iOS application, Paper

Facebook Paper

The landing page for Facebook’s new iOS application, Paper, uses full-screen video to showcase the unique gestural controls designed into the app. It’s a stunning website, and the technical feat behind the video astounds as you study the details.

FiftyThree’s Pencil, a gorgeous iPad drawing stylus.

Pencil by FiftyThree

FiftyThree uses a lot of great motion throughout its website. The site for its newest product — Pencil — seems innocuous enough, until halfway down the page, your scrolling motion unravels the hardware of its product, giving you a peek at what’s inside.

What a beaut.

Mac Pro Homepage

Apple’s Mac Pro Homepage is perhaps the most well-known example of dissecting a product through motion and scrolling on a website. Including video, animated graphics, and scroll-based trigger animations, this one’s got a wealth of animation inspiration.


Explaining a Concept

Some great websites utilize motion and animation to explain an otherwise abstract concept. Here’s a few great examples.

Coin

Coin uses a lot of nice motion techniques as you scroll through the site. However, it excels at selling its concept through animation. Seeing four credit cards combine into one — the ubiquitous Coin — explains the product concept in a succinct manner.

Dataveyes

Dataveyes doesn’t simply explain what it does (analyze data), but it also makes a case for why it does it — all conveyed through the clever animation of particles moving throughout the backdrop of its website.


Adding Style

And of course, sometimes motion is used purely for style. The following are great examples of cool, attractive motion applied to the web.

Big Cartel’s 2013 Recap

This 2013 annual report doesn’t need animated gifs, or statistics that grow as you scroll, but it certainly looks stylish for the better.

Hello Monday

This page is filled with motion that occurs as you hover and scroll. It’s purely cosmetic, but it adds motion to an otherwise modular page.

Names for Change

The animation present in Names for Change isn’t vital to its layout. It is, however, a wonderful detail that brings a slight bit of engagement to an otherwise static page.


Telling a Story

Some sites use motion to supplement a narrative. These go beyond the superficial, instead augmenting how we interpret a narrative.

An article from the New York Times illustrated with motion

Tomato Can Blues

The New York Times’s story juxtaposes Mary Pilon’s text with illustrations by Attila Futaki. The illustrations, which move as the reader scrolls, add a sense of depth that complements — and enhances — the emotions running throughout the narrative.

The Dangers of Fracking

Dangers Of Fracking

This website uses well-timed scrolling animation to build the journey of the fracking industry. This animated story brings engagement to what might otherwise remain a series of statistics.


What’s Next?

I suspect we’ll be seeing more fabulous sites that implement motion in new and innovative ways.

Tell me — what examples of motion in animation are your favorite?