Scroll Timeline Chronicle
A scroll-scrubbed vertical chronology: entries magnetically snap into a reading band and overshoot at the handoff while a drawn spine, an odometer year and a depth-blur falloff all react to the same scroll.
About This Effect
An editorial chronology effect that turns a company history, product roadmap or milestone list into one scroll-scrubbed instrument, art-directed as a monochrome fashion-editorial sheet: white, true black and hairline rules, with records filed behind a large didone folio number and a ruled margin, and a giant year bleeding off the corner in the lightest tint on the page. There is no accent colour: the active record is carried by weight, scale and one solid black mark. A single pinned stage holds every entry stacked in 3D; scroll position drives a continuous index, and a back.inOut curve on the fraction between entries makes each one hang at rest, then undershoot and overshoot as the next takes over.
Read the full effect overview
Everything else in the composition is driven from that same number: a black spine draws itself down the ruled margin, a giant year rolls digit by digit like an odometer, and entries either side of the active one fall back in depth with a blur and desaturation falloff. Scroll velocity leans the whole column and stretches the spine head into a liquid streak.
What's Included
- One pinned ScrollTrigger drives every channel from a single scrubbed index, so nothing can drift out of sync
- Magnetic snap with overshoot: a back.inOut curve on the between-entry fraction gives each handoff a hang, an undershoot and a settle
- Drawn accent spine with a travelling head, per-entry nodes that light as they are passed, and a tick ray fired across at each handoff
- Odometer year counter built from digit reels, with a per-digit lag so the year rolls rather than flicking
- Depth falloff on inactive entries: translateZ, rotationX, opacity, blur and desaturation, all quantised so the filter is only rewritten when it changes
- Velocity lean on a frame-rate independent ticker that decays back to rest, gated to the viewport by a second ScrollTrigger
- Optional external jump controls (data-chron-jump) that scroll to any entry, Lenis-aware, with aria-current kept in step
- Complete without JavaScript: the chronicle is authored as a plain readable list and only becomes the pinned stage once the effect runs
- Clickable ruled margin: every tick on the spine seeks to its entry, with the year revealed beside it on hover
Perfect For
- Company history or about pages where the founding story is the sell
- Product roadmaps and changelogs that need to feel like a release, not a table
- Case-study process sections walking a project from brief to launch
- Annual reports and impact pages where each year deserves its own beat
- Conference or festival programmes counted down year by year
How It Works
A single pinned ScrollTrigger scrubs the whole section and converts progress into a floating index across the entries. The fraction between two entries is passed through a back.inOut ease, which is what produces the magnetic hang at each stop and the overshoot through the handoff; every other channel reads that same eased index.
Each frame the script sets y, x, translateZ, rotationX, opacity and a blur/saturate filter per entry from its distance to the index, scales the spine draw, positions the travelling head and sets each digit reel's yPercent to an interpolated digit value. Blur is quantised to half a pixel so the filter string is only rewritten when it actually changes.
Scroll velocity is read in onUpdate and fed to a gsap.ticker loop that decays it back to zero with a frame-rate independent exponential approach, driving a skewY on the entry column and a scaleY/scaleX stretch on the spine head. The ticker is gated to the viewport by a second ScrollTrigger, and everything is torn down through gsap.context and gsap.matchMedia.