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.
Infinite scroll fade ins
Note how Samsung displays additional content as you scroll down the page…
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?
Some sites use CSS animations in a really subtle way, for example a page background that changes ever so slightly.
It is possible to scroll individual columns, as well as whole pages.
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.
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.