← Gallery 092

Scroll Progress

CSS + JS

Designing motion

Good animation goes unnoticed: it gives elements weight, guides the eye, and disappears behind the content it serves.

The 200 ms rule

Below it, the eye reads a change of state; above it, a wait. Most micro-interactions live in between, around 150 to 250 milliseconds.

Entrance transitions can stretch a little further — arriving content deserves some ceremony — but exits should stay brief.

The right easing

Ease-out for what enters, ease-in for what leaves, linear for what follows the finger or the scroll. The bar up top is linear: it measures, it does not interpret.

You have reached the end of the article — and the bar the end of its run.