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.

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, or springy motion.
• Aggressive scale jumps.
• Flashy gaming-style effects.
• Too many simultaneous scroll effects.
• Scroll hijacking that makes the page hard to read.

Core Stack

npm i gsap lenis

import Lenis from "lenis";
import "lenis/dist/lenis.css";
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";

gsap.registerPlugin(ScrollTrigger);

const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;

if (!reduceMotion) {
  const lenis = new Lenis({
    lerp: 0.08,
    smoothWheel: true,
    wheelMultiplier: 0.9,
  });

  lenis.on("scroll", ScrollTrigger.update);

  gsap.ticker.add((time) => {
    lenis.raf(time * 1000);
  });

  gsap.ticker.lagSmoothing(0);
}

window.addEventListener("load", () => ScrollTrigger.refresh());