Cinematic Scroll Storytelling

Use When

• A page should feel like a premium editorial story that unfolds as the user scrolls.
• The user mentions scroll-driven storytelling, scroll-linked animation, sticky card stacks, parallax, split text, preloader, or cinematic progression.
• A portfolio, studio, product, or landing page needs section-by-section reveals with layered depth.
• The implementation can use GSAP, ScrollTrigger, and Lenis.

Effect Vocabulary

• Scroll-driven storytelling: sections reveal as a sequence while scrolling.
• Scroll-linked animation: progress is tied directly to scroll with scrub.
• Scroll-triggered motion: animation starts when a section enters the viewport.
• Staggered reveal: words, lines, cards, or elements enter with small delays.
• Progressive reveal: opacity, scale, blur, clip, or position changes over scroll progress.
• Sticky card stack: sticky cards layer, scale, and recede as the next card arrives.
• Parallax scrolling: background and foreground layers move at different speeds.
• Scroll scrubbing: animation follows the scrollbar through scrub: true or scrub: 1.
• Kinetic typography: masked split-text movement, usually word-by-word or line-by-line.
• Preloader: opening loading screen, progress bar, and intro transition.