Page header transitions

There are numerous ways of animating your page header, should you wish to do so.

Page loading effects

As well as headers, you can add fast, lightweight animated effects as a new page loads. Choose from parallelograms, windscreen wipers and spill effects, among others.

Try some for yourself.

Infinite scroll fade ins

Note how Samsung displays additional content as you scroll down the page…

Hovercrafting

Take ownership of your hover states! Make your website stand out from the crowd by focusing on the little details. Try using fades, washes, different font sizes, and so on.

Dynamic / animated charts

Why bother with static images when you can render a chart on the fly?

Slo-mo animation

Some sites use CSS animations in a really subtle way, for example a page background that changes ever so slightly.

Modular scrolling

It is possible to scroll individual columns, as well as whole pages.

Fold effects

I’ve seen a bunch of mobile apps that use folds like this, either vertical or horizontally.

Progress bars and buttons

A ‘submit’ button that also acts as a progress bar.

The slow reveal

This is perhaps best illustrated by the before and after images of the D-Day landings, as seen on The Guardian. Drag your mouse across the picture from left to right (and vice versa) to flip between old and new pictures.

Mobile menu transitions

This is an example of a staggered transition, from Paper. Various other mobile animations and transitions can be found at Capptivate.

Minimal / innovative forms

What if forms weren’t so headache inducing, so long, so paginated, so goddamned boring? Form optimisation should be a priority, and there are some new design patterns coming into play…

Rich arrows / scroll buttons

Scrolling is all the rage, so it makes sense to choose a quality design for those navigational arrows.

Slidey navigation

Pushdown navigation and pull-out sliders (as can be seen on Medium, below) are growing in popularity as a web design trend.

What other examples have you seen out in the wild? Are animations and motion transitions here to stay? Do leave a comment below.