02 / Scroll-driven

View Progress Timeline

Every row times its own animation by its own trip across the screen, so no two are at the same point at the same moment.

also called view timeline · element-in-viewport progress

Each element measures its own passage through the viewport, so several different values exist at once. animation-range is the part most people miss — it decides which slice of that passage the animation occupies.

How it is built

view-timeline-name: --plate; animation-timeline: --plate; animation-range: entry 0% cover 45%;

Exhibit 04 · Urformen