Lenis + GSAP Scroll Story

if (!window.MotionPreference) {
  const __mql = window.matchMedia("(prefers-reduced-motion: reduce)");
  const __listeners = new Set();

  const MotionPreference = {
    prefersReducedMotion() {
      return __mql.matches;
    },
    setOverride(value) {
      const reduced = Boolean(value);
      document.documentElement.classList.toggle("reduced-motion", reduced);
      window.dispatchEvent(new CustomEvent("motion-preference", { detail: { reduced } }));
      for (const listener of __listeners) {
        try {
          listener({ reduced, override: reduced, systemReduced: __mql.matches });
        } catch {}
      }
    },
    onChange(listener) {
      __listeners.add(listener);
      try {
        listener({
          reduced: __mql.matches,
          override: null,
          systemReduced: __mql.matches,
        });
      } catch {}
      return () => __listeners.delete(listener);
    },
    getState() {
      return { reduced: __mql.matches, override: null, systemReduced: __mql.matches };
    },
  };

  window.MotionPreference = MotionPreference;
}

const toggle = document.getElementById("motionToggle");
const progressBar = document.getElementById("progressBar");
const sections = Array.from(document.querySelectorAll("[data-animate]"));

const state = {
  reduced: window.MotionPreference.prefersReducedMotion(),
  lenis: null,
  rafId: 0,
  animations: []
};

function setLabel() {
  toggle.textContent = state.reduced ? "Enable motion" : "Disable motion";
}

function setProgress(value) {
  const clamped = Math.min(1, Math.max(0, value));
  progressBar.style.transform = `scaleX(${clamped})`;
}

function updateWindowProgress() {
  const max = Math.max(document.body.scrollHeight - window.innerHeight, 1);
  setProgress(window.scrollY / max);
}

function resetVisuals() {
  sections.forEach((section) => {
    section.style.opacity = "1";
    section.style.transform = "none";
  });
  document.querySelectorAll(".reveal").forEach((node) => {
    node.style.opacity = "1";
    node.style.transform = "none";
  });
  document.querySelectorAll(".stage-card").forEach((node) => {
    node.style.opacity = "1";
    node.style.transform = "none";
  });
}

function killMotion() {
  if (state.rafId) {
    cancelAnimationFrame(state.rafId);
    state.rafId = 0;
  }

  if (state.lenis) {
    state.lenis.destroy();
    state.lenis = null;
  }

  state.animations.forEach((anim) => anim.kill());
  state.animations = [];

  if (window.ScrollTrigger) {
    window.ScrollTrigger.getAll().forEach((trigger) => trigger.kill());
  }

  resetVisuals();
}

function register(anim) {
  state.animations.push(anim);
  return anim;
}

function setupLenis() {
  state.lenis = new window.Lenis({
    lerp: 0.085,
    smoothWheel: true,
    wheelMultiplier: 1
  });

  state.lenis.on("scroll", (e) => {
    setProgress(e.progress || 0);
    if (window.ScrollTrigger) window.ScrollTrigger.update();
  });

  const raf = (time) => {
    if (!state.lenis) return;
    state.lenis.raf(time);
    state.rafId = requestAnimationFrame(raf);
  };

  state.rafId = requestAnimationFrame(raf);
}

function setupGsap() {
  if (!window.gsap || !window.ScrollTrigger) return;

  window.gsap.registerPlugin(window.ScrollTrigger);

  register(
    window.gsap.fromTo(
      ".intro .reveal",
      { y: 26, opacity: 0 },
      {
        y: 0,
        opacity: 1,
        duration: 0.8,
        ease: "power3.out",
        stagger: 0.08
      }
    )
  );

  sections.forEach((section) => {
    if (section.classList.contains("intro")) return;
    register(
      window.gsap.fromTo(
        section.querySelectorAll(".reveal"),
        { y: 52, opacity: 0 },
        {
          y: 0,
          opacity: 1,
          duration: 0.9,
          ease: "power2.out",
          stagger: 0.08,
          scrollTrigger: {
            trigger: section,
            start: "top 78%",
            end: "top 38%",
            scrub: 0.8
          }
        }
      )
    );
  });

  const orbs = document.querySelectorAll(".orb");
  orbs.forEach((orb, i) => {
    register(
      window.gsap.to(orb, {
        x: i % 2 ? -22 : 20,
        y: i % 2 ? 16 : -15,
        scale: i % 2 ? 1.06 : 0.94,
        repeat: -1,
        yoyo: true,
        ease: "sine.inOut",
        duration: 3.2 + i * 0.7
      })
    );
  });

  register(
    window.gsap.timeline({
      scrollTrigger: {
        trigger: ".stage",
        start: "top top",
        end: "+=130%",
        scrub: 1,
        pin: true
      }
    })
    .to(".card-one", { xPercent: -35, rotation: -8, scale: 0.9 }, 0)
    .to(".card-two", { yPercent: -35, scale: 0.94 }, 0)
    .to(".card-three", { xPercent: 35, rotation: 8, scale: 0.9 }, 0)
  );
}

function applyMode() {
  killMotion();
  setLabel();
  const noMotion = state.reduced || !window.Lenis || !window.gsap || !window.ScrollTrigger;
  document.body.classList.toggle("no-motion", noMotion);

  if (noMotion) {
    updateWindowProgress();
    return;
  }

  setupLenis();
  setupGsap();
}

toggle.addEventListener("click", () => {
  state.reduced = !state.reduced;
  applyMode();
});

window.addEventListener("scroll", () => {
  if (!state.lenis) updateWindowProgress();
}, { passive: true });

window.addEventListener("resize", () => {
  if (window.ScrollTrigger) window.ScrollTrigger.refresh();
  updateWindowProgress();
});

setLabel();
applyMode();

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Demo 01 - Lenis + GSAP Scroll Story</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <header class="topbar">
      <a href="../">Back to demos</a>
      <div class="controls">
        <span class="hint">Scroll Story</span>
        <button id="motionToggle" class="toggle"></button>
      </div>
    </header>

    <div class="progress-wrap" aria-hidden="true">
      <span id="progressBar" class="progress-bar"></span>
    </div>

    <main>
      <section class="panel intro" data-animate>
        <div class="content reveal-group">
          <p class="label reveal">Demo 01</p>
          <h1 class="reveal">Lenis + GSAP Scroll Story</h1>
          <p class="reveal">A stronger baseline for cinematic pacing, section reveals, and scroll rhythm.</p>
          <div class="chips reveal">
            <span>Lenis smooth flow</span>
            <span>GSAP timelines</span>
            <span>Reduced-motion safe</span>
          </div>
        </div>

        <div class="visual" aria-hidden="true">
          <span class="orb orb-a"></span>
          <span class="orb orb-b"></span>
          <span class="orb orb-c"></span>
          <span class="orb orb-d"></span>
        </div>
      </section>

      <section class="panel" data-animate>
        <div class="content reveal-group">
          <h2 class="reveal">Signal</h2>
          <p class="reveal">Open with high contrast hierarchy, then guide users through chunks of motion and meaning.</p>
          <ul class="metrics reveal">
            <li><strong>60fps target</strong><span>Compositor-friendly transforms</span></li>
            <li><strong>Readable layers</strong><span>Text remains stable under effects</span></li>
            <li><strong>Accessible by default</strong><span>Motion can be disabled at any time</span></li>
          </ul>
        </div>
      </section>

      <section class="panel stage" data-animate>
        <div class="content reveal-group">
          <h2 class="reveal">Rhythm</h2>
          <p class="reveal">This pinned stage demonstrates chapter transitions and layered card movement.</p>
        </div>
        <div class="stage-cards" aria-hidden="true">
          <article class="stage-card card-one">Chapter A</article>
          <article class="stage-card card-two">Chapter B</article>
          <article class="stage-card card-three">Chapter C</article>
        </div>
      </section>

      <section class="panel outro" data-animate>
        <div class="content reveal-group">
          <h2 class="reveal">Launch</h2>
          <p class="reveal">Use this file as your production starter for narrative landing pages.</p>
          <p class="reveal note">Next step: combine this structure with Demo 09/10 WebGL backgrounds.</p>
        </div>
      </section>
    </main>

    <script src="https://cdn.jsdelivr.net/npm/@studio-freight/lenis@1.0.42/bundled/lenis.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/ScrollTrigger.min.js"></script>
    <script src="script.js"></script>
      </body>
</html>