cinematic-gsap-lenis-motion-system

Cinematic GSAP Lenis Motion System

Use When

• The site needs a full premium motion language, not one isolated animation.
• Smooth scrolling, scroll reveals, pinned scenes, parallax, hover motion, and cursor behavior should feel connected.
• The target feel is luxury editorial, Apple-level polish, creative studio portfolio, or immersive cinematic storytelling.
• The stack can use GSAP, ScrollTrigger, and Lenis.

Motion Taste

• Smooth, elegant, slightly delayed, and intentional.
• Staggered motion should guide reading order.
• Layered movement should create depth without making the interface feel busy.
• ScrollTrigger should start scenes when they enter the viewport, not react to every tiny scroll.
• Prefer subtlety over intensity.

Avoid:

• Bounce, elastic, springy, or playful motion.
• Fast abrupt transitions.
• Large scale jumps.
• Over-animated UI.
• Flashy gaming-style effects.

Base Tokens

• Eases: power3.out, power4.out, expo.out.
• Scroll scrub: scrub: 0.8 to 1.4 for cinematic delay.
• Reveals: 0.75s to 1.1s.
• Hover: 0.35s to 0.6s.
• Cursor lag: 0.25s to 0.45s.
• Text stagger: words 0.035s to 0.07s, lines 0.08s to 0.14s.
• Card stagger: 0.06s to 0.1s.
• Reveal trigger: start: "top 82%".
• Pin handoff: anticipatePin: 1.

Setup

Install:

npm i gsap lenis

Initialize once, after the DOM exists. Lenis drives its RAF through the GSAP ticker so ScrollTrigger and smooth scroll stay synced.

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

gsap.registerPlugin(ScrollTrigger);
gsap.defaults({ ease: "power3.out", duration: 0.85 });

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

let lenis;

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

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

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

  gsap.ticker.lagSmoothing(0);
}

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