Design Trend: Motion in Web Design 

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

Emelyn Baker
Mar 19, 2014 · 4 min read

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.

Image for post
Image for post

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.

Image for post
Image for post

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.

Image for post
Image for post

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.

Image for post
Image for post

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.

Image for post
Image for post

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.

Image for post
Image for post

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.

Image for post
Image for post

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.

Image for post
Image for post

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.

Image for post
Image for post

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.

Image for post
Image for post

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?

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store