motion.
motion has two registers, and what the screen is for picks between them. the test is what scroll means there: if scroll is how the content is consumed, scroll is the clock and you scrub. if it is only how someone reaches the next control, motion gets its own clock and you trigger.
scroll past and both sides climb out. scroll back up and the left one climbs in again, because it is reading your scroll position rather than remembering that it already ran. the right one has spent itself, and only re-arms on a route change, which is what the button stands in for.
scrubbed, for a page you scroll
nothing fires on viewport entry. a line climbs out from behind its own edge as a continuous function of how far you have scrolled, so scrolling back climbs it in again. this is the landing-page register, and the front of this site runs on it.
it is written with the page rather than imported. each scrubbed page owns its own scenes, because the ranges are cut against that page's layout and nobody else's.
the one exception is the hero. it gets a single timed entrance because at the top of the page there is no scroll yet to author with. one gesture per page, and only there.
tiivistymä /ˈtiːʋistymæ/ (condensate; what forms when vapour meets a cold surface). vapour touching something cold and becoming visible. not an event but a reading of the conditions, and when they reverse it goes back.
nothing here fires and nothing is spent, so scrubbing back takes the page apart exactly the way it was assembled. an animation you can run backwards was never a performance.
triggered, for a screen you work in
inside an app nobody is reading an argument, they are going somewhere. content arrives once and settles. tying that to scroll would mean a row that undoes itself every time somebody scrolls up to check a number, which is motion getting in the way of the work.
this is the register Reveal and PageTransition are written for: one entrance, on view or on route change, then done.
when motion is off
a reduced-motion preference collapses both registers. scrubbed lines sit where they land, triggered content just arrives, and the duration tiers read as zero. nothing the page says lives in the motion.
how long
scrubbed motion has no duration. scroll is its clock. everything that runs on its own clock, the triggered register and the hero's one gesture, reads the theme's: four duration tiers and three easings, the same names everywhere, set to different values.
a component asks for duration-slowand gets kajo's long spring or sisu's short damped one, without knowing the difference.
same distance, same trigger, three themes. watch kajo overshoot and sisu refuse to.
kajo
- fast
- ·
- base
- ·
- slow
- ·
- ambient
- ·
languid, and it overshoots. the spring is allowed to be seen.
sisu
- fast
- ·
- base
- ·
- slow
- ·
- ambient
- ·
snappy and critically damped. nothing wobbles in a dashboard.
savi
- fast
- ·
- base
- ·
- slow
- ·
- ambient
- ·
calm. slower than sisu, straighter than kajo.