Opens in a new tab

Animate short distances

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.

George Wert
Created by George Wertgeorgewert.com

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