cinematic-scroll-storytelling

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. Show more Installs 1.1K Repository mengto/skills GitHub Stars 5.9K First Seen May 11, 2026 Security Audits Gen Agent Trust Hub Pass Socket Pass Snyk Pass