First load
- Trigger
- Easing
- --ease-out cubic-bezier(0.16, 1, 0.3, 1)
- Reduced motion
Used in
Once per session: the grid lines draw down, the header hairline draws across and the page title lifts. Content is never hidden, so nothing waits to be read.
Motion at the scale of a page: arriving, moving between pages and scrolling.
Used in
Once per session: the grid lines draw down, the header hairline draws across and the page title lifts. Content is never hidden, so nothing waits to be read.
Used in
The old page fades out, the new one rises a few pixels and the header hairline redraws, in under 400ms, while the navigation stays put. Replay changes only the address query, so it plays without leaving this page.
Hairline diagrams draw with scroll position and undraw when you scroll back. The reader's scroll is the clock, so there is no duration or curve.
One illustration per page appears once, by a mask wipe from left to right when about a third of it is in view. It is rendered whole, so without JavaScript it is simply there.