cinematic-scroll-storytellinglisted

# 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. ## Target Feel - Luxury editorial website. - High-end creative studio portfolio. - Apple-level motion polish. - Modern Awwwards interaction language. - Immersive cinematic landing page. Avoid: - Bounce, elastic,