Scroll Story (concept)
Concept · 2026 · 2026
A long-form narrative page: fly through a letterform into a scrubbed canvas sequence, read paragraphs that ink in as they pass centre, stack chapter cards, and follow a drawn route between stations.
Effects that recreate this look
- 01
Featured medium Scroll advancedZoom-through Hero
A pinned hero where the display word DEEPER is punched out of a page-coloured panel; scrolling scales the word 40× around the stem of one letter so the camera flies through it and the image panel behind is revealed.
- gsap
- scrolltrigger
- svg
- 02
Featured medium Scroll advancedScroll-scrubbed Image Sequence (Canvas)
A pinned full-viewport canvas plays a 90-frame sequence scrubbed by scroll — the frames are generated procedurally at load (a turning wireframe ring in soft gradients and grain), with a mono frame counter and headlines that hand over at 30% and 70%.
- gsap
- scrolltrigger
- canvas2d
- 03
light Scroll intermediateText Highlight Fill on Scroll
A large serif paragraph whose words fill from a muted ink to full text colour as each one crosses the viewport centre, scrubbed by scroll — plus a marker-style accent highlight that draws itself behind two key phrases.
- gsap
- scrolltrigger
- splittext
- 04
light Scroll intermediateStacking Cards on Scroll
Five full-width cards pin in sequence as you scroll; each arriving card slides over the previous one, which scales down to 0.9 and dims behind a translucent overlay, so the section ends as a neat stepped stack.
- gsap
- scrolltrigger
- 05
light Layout intermediateSticky Split-Screen Storytelling
A two-column feature: the left visual column is sticky for the whole section while four text chapters scroll by on the right; each chapter crossing the centre swaps the visual with a directional crossfade and lights its progress dot.
- gsap
- scrolltrigger
- 06
light Scroll advancedScroll-driven SVG Path Draw
A long vertical SVG route draws itself as you scroll (DrawSVG 0% → 100%, scrubbed) while a glowing dot rides the pen tip via MotionPath; four station dots pop in with a back.out(2) overshoot and their labels slide in as the line reaches them.
- gsap
- scrolltrigger
- svg