The entrance on this site moves each block eight pixels. That is the whole idea. A short travel over a long duration reads as a settle rather than a slide, and nothing has to move fast enough to strobe.
It took a while to get there. The first version moved blocks forty pixels, because forty pixels was easy to see in a review, and easy to see is exactly the problem. Motion that announces itself pulls the eye away from the thing that moved. By the third round the number had come down to sixteen, then to eight, and at eight it finally stopped being an effect and became the way the page arrives.
Distance is relative
Eight pixels is right where blocks sit close together. Down a tall, mostly empty column the same eight pixels read as a plain fade, so the number moves with its context instead of being a constant.
Time is relative too
The same is true of time. Seven hundred milliseconds is slow for a button and fast for a page. The entrance can afford it because nobody is waiting on it. The content is readable from the first frame, and the motion only finishes the sentence. Anything a person is waiting on gets a third of that, or nothing at all.
rise 8pxduration 700msstagger 60mseasing cubic-bezier(0.32, 0.72, 0, 1)Ease is the design
With a distance that small, the curve does most of the work. A linear eight pixels looks mechanical; the same eight pixels on a steep ease-out arrive almost at once and then spend the rest of the duration settling the last pixel. That long tail is what the eye reads as calm.
- Ease out on the way in.
- Ease in, and faster, on the way out.
- Stagger by order of reading, never by position alone.
- Respect reduced motion: a fade, or nothing.
When not to move
The hardest part of restrained motion is the motion you leave out. A hover that slides, a list that reshuffles, an icon that spins while it waits: each is pleasant once and tiring by the hundredth time. The rule that held up best was simple: animate what changes the page, not what the page does all day.
Motion should explain where something came from. Anything more is decoration.
