Opens in a new tab

Animate short distances

A card in its final position with two faint dashed outlines just below it, showing it moved up 16px as it faded in.

When an element slides in from far away, like a card flying up from the bottom of the screen, people have to watch it travel before they can use it. Long movements take more time, and they can pull attention away from whatever the person was doing.

Keep entrance movements small, somewhere around 8 to 24px, and pair them with a fade. For example, a card might move up 16px while it fades from transparent to fully visible. The short shift still hints at where the element came from, and the fade does most of the work of drawing the eye.

Get Free Design Lessons Every Monday Morning

Get Free Design Lessons Every Monday Morning

Three short lessons each Monday on a single design topic. They're written in plain language and give you ideas to use on your next site.

You're in!

Check your inbox for your first email.
Close