Horizontal Scroll Gallery

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;
}

function prefersReducedMotion() {
  return window.MotionPreference.prefersReducedMotion();
}

function initDemoShell() {
  // No-op shim in imported standalone snippets.
}

import gsap from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
import Lenis from 'lenis';

gsap.registerPlugin(ScrollTrigger);

// ── Demo shell ──
initDemoShell({
  title: 'Horizontal Scroll Gallery',
  category: 'scroll',
  tech: ['gsap', 'lenis', 'scrolltrigger'],
});

// ── Lenis ──
const lenis = new Lenis({ lerp: 0.1, smoothWheel: true });
lenis.on('scroll', ScrollTrigger.update);
gsap.ticker.add((time) => lenis.raf(time * 1000));
gsap.ticker.lagSmoothing(0);

const reduced = prefersReducedMotion();
if (reduced) document.documentElement.classList.add('reduced-motion');

window.addEventListener('motion-preference', (e) => {
  document.documentElement.classList.toggle('reduced-motion', e.detail.reduced);
  ScrollTrigger.refresh();
});

// ── Refs ──
const track = document.getElementById('horizontal-track');
const panels = gsap.utils.toArray('.panel');
const progressFill = document.getElementById('progress-fill');
const progressBar = document.querySelector('.progress-bar');

// ── Calculate total scroll distance ──
function getScrollWidth() {
  return track.scrollWidth - window.innerWidth;
}

// ── Horizontal scroll pin ──
const horizontalTween = gsap.to(track, {
  x: () => -getScrollWidth(),
  ease: 'none',
  scrollTrigger: {
    trigger: '.horizontal-wrap',
    pin: true,
    scrub: 1,
    end: () => `+=${getScrollWidth()}`,
    invalidateOnRefresh: true,
    onUpdate: (self) => {
      // Update progress bar
      progressFill.style.width = `${self.progress * 100}%`;
    },
    onEnter: () => progressBar.classList.add('visible'),
    onLeave: () => progressBar.classList.remove('visible'),
    onEnterBack: () => progressBar.classList.add('visible'),
    onLeaveBack: () => progressBar.classList.remove('visible'),
  },
});

// ── Panel entrance animations ──
if (!reduced) {
  panels.forEach((panel) => {
    const inner = panel.querySelector('.panel-inner');

    gsap.set(inner, { opacity: 0.3, scale: 0.88 });

    gsap.to(inner, {
      opacity: 1,
      scale: 1,
      duration: 1,
      ease: 'power2.out',
      scrollTrigger: {
        trigger: panel,
        containerAnimation: horizontalTween,
        start: 'left 80%',
        end: 'left 30%',
        scrub: 1,
      },
    });
  });
}

// ── Intro animations ──
if (!reduced) {
  const introTl = gsap.timeline({ defaults: { ease: 'expo.out' } });

  gsap.set('.intro .eyebrow', { opacity: 0, y: 20 });
  gsap.set('.intro h1', { opacity: 0, y: 40 });
  gsap.set('.intro .subtitle', { opacity: 0, y: 25 });
  gsap.set('.intro .scroll-hint', { opacity: 0 });

  introTl
    .to('.intro .eyebrow', { opacity: 1, y: 0, duration: 0.7, delay: 0.3 })
    .to('.intro h1', { opacity: 1, y: 0, duration: 0.9 }, '-=0.4')
    .to('.intro .subtitle', { opacity: 1, y: 0, duration: 0.7 }, '-=0.5')
    .to('.intro .scroll-hint', { opacity: 1, duration: 0.5 }, '-=0.3');
}

// ── Outro reveal ──
if (!reduced) {
  gsap.set('.outro h2', { opacity: 0, y: 40 });
  gsap.set('.btn-back', { opacity: 0, y: 20 });

  gsap.to('.outro h2', {
    opacity: 1, y: 0, duration: 0.8, ease: 'expo.out',
    scrollTrigger: { trigger: '.outro', start: 'top 70%' },
  });

  gsap.to('.btn-back', {
    opacity: 1, y: 0, duration: 0.6, ease: 'expo.out',
    scrollTrigger: { trigger: '.outro', start: 'top 60%' },
  });
}

// ── Handle resize ──
window.addEventListener('resize', () => {
  ScrollTrigger.refresh();
});

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Horizontal Scroll Gallery — stealthisdesign</title>
  <link rel="stylesheet" href="style.css">
    <script type="importmap">{"imports":{"gsap":"/vendor/gsap/index.js","gsap/ScrollTrigger":"/vendor/gsap/ScrollTrigger.js","gsap/SplitText":"/vendor/gsap/SplitText.js","gsap/Flip":"/vendor/gsap/Flip.js","gsap/ScrambleTextPlugin":"/vendor/gsap/ScrambleTextPlugin.js","gsap/TextPlugin":"/vendor/gsap/TextPlugin.js","gsap/all":"/vendor/gsap/all.js","gsap/":"/vendor/gsap/","lenis":"/vendor/lenis/dist/lenis.mjs","three":"/vendor/three/build/three.module.js","three/addons/":"/vendor/three/examples/jsm/"}}</script>
  <style>html.lenis,
html.lenis body {
  height: auto;
}

.lenis:not(.lenis-autoToggle).lenis-stopped {
  overflow: clip;
}

.lenis [data-lenis-prevent],
.lenis [data-lenis-prevent-wheel],
.lenis [data-lenis-prevent-touch] {
  overscroll-behavior: contain;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

.lenis.lenis-autoToggle {
  transition-property: overflow;
  transition-duration: 1ms;
  transition-behavior: allow-discrete;
}</style>
</head>
<body>
  <!-- Intro -->
  <section class="intro">
    <span class="eyebrow">Demo 02</span>
    <h1>Horizontal Scroll Gallery</h1>
    <p class="subtitle">Scroll down — the gallery scrolls sideways. Each panel reveals with scale and opacity transitions.</p>
    <div class="scroll-hint">
      <span>Scroll to explore</span>
      <div class="scroll-arrow"></div>
    </div>
  </section>

  <!-- Horizontal section -->
  <section class="horizontal-wrap">
    <div class="progress-bar"><div class="progress-fill" id="progress-fill"></div></div>
    <div class="horizontal-track" id="horizontal-track">

      <div class="panel" style="--hue: 200;">
        <div class="panel-inner">
          <span class="panel-number">01</span>
          <h2>Kinetic<br>Typography</h2>
          <p>Letters and words choreographed with scroll-driven timelines.</p>
        </div>
      </div>

      <div class="panel" style="--hue: 270;">
        <div class="panel-inner">
          <span class="panel-number">02</span>
          <h2>Particle<br>Systems</h2>
          <p>Thousands of elements forming organic, flowing structures.</p>
        </div>
      </div>

      <div class="panel" style="--hue: 330;">
        <div class="panel-inner">
          <span class="panel-number">03</span>
          <h2>Scroll<br>Choreography</h2>
          <p>Precisely timed sequences that unfold with the user's scroll.</p>
        </div>
      </div>

      <div class="panel" style="--hue: 45;">
        <div class="panel-inner">
          <span class="panel-number">04</span>
          <h2>Shader<br>Art</h2>
          <p>GPU-powered visuals creating mesmerizing real-time patterns.</p>
        </div>
      </div>

      <div class="panel" style="--hue: 160;">
        <div class="panel-inner">
          <span class="panel-number">05</span>
          <h2>3D<br>Environments</h2>
          <p>Immersive spaces built with WebGL and Three.js.</p>
        </div>
      </div>

      <div class="panel" style="--hue: 15;">
        <div class="panel-inner">
          <span class="panel-number">06</span>
          <h2>Magnetic<br>Interactions</h2>
          <p>Elements that attract and repel based on cursor proximity.</p>
        </div>
      </div>

    </div>
  </section>

  <!-- Outro -->
  <section class="outro">
    <h2>Gallery complete.</h2>
    <a href="/" class="btn-back">Back to Showcase</a>
  </section>

  <script type="module" src="script.js"></script>
</body>
</html>