Mat Voyce Scroll Animation

Kinetic Type Scroll — pinned horizontal title reel + 3D fly-through cards

Goal

Build a full-page scroll experience: a pinned section where four giant italic uppercase project titles scroll horizontally as a 400vw reel while ten rounded image cards fly toward the camera from extremely deep translateZ. Each title is three stacked color copies, and the two top copies jitter horizontally based on live scroll velocity — a kinetic-typography "ink offset" effect.

Tech

Vanilla HTML/CSS/JS with ES module imports. Use gsap (npm) with the ScrollTrigger plugin, plus lenis for smooth scrolling. No other libraries.

Wire Lenis to GSAP exactly like this: create new Lenis(), call ScrollTrigger.update on its scroll event, drive it from GSAP's ticker with lenis.raf(time * 1000), and call gsap.ticker.lagSmoothing(0). Run everything inside a DOMContentLoaded handler.

Layout / HTML

• <nav> — fixed, top-left, full width, z-index: 2, padding 2em, flex with gap: 4em. Three children:
• .logo (flex: 3) containing .logo-img (width 120px) with an <img> logo.
• .tagline (flex: 1): a <p> reading "Your go-to creative powerhouse for" then a line break and a <span> "design, branding, and motion." (span in gray).
• .about (flex: 1): two <p>: "Headquartered in Toronto" and a <span> "Collaborating worldwide" (gray).
• <section class="hero"> — 100vw × 100vh, centered <h1>(Scroll if you dare)</h1>.
• <section class="sticky"> — 100vw × 100vh, contains:
• <div class="titles"> with four <div class="title"> blocks. Each block holds THREE stacked copies of the same heading: <h1 class="title-1">, <h1 class="title-2">, <h1 class="title-3">. The four headings read: "Showcase Hub", "Nova Stream", "Circle 30", "Bites & Banter".
• <div class="images"> — empty in HTML; the 10 cards are created by JS.
• <section class="outro"> — 100vw × 100vh, centered <h1>(That's a wrap)</h1>.

All sections: position: relative; width: 100vw; height: 100vh; overflow: hidden;.

Styling

• Reset: * { margin: 0; padding: 0; box-sizing: border-box; }. All img { width: 100%; height: 100%; object-fit: cover; }.
• Typeface: a heavy condensed display font. Use font-family: "F37 Judge", "Anton", Impact, sans-serif on body (the original uses an F37 Judge–style condensed grotesque; any bold condensed sans is an acceptable substitute). Nav p are font-weight: 500, antialiased; nav p span { color: gray; }.
• h1 global: text-transform: uppercase; font-size: 4vw; font-weight: 500; color: #1f1f1f;.
• Palette: .hero and .outro background #edebde (warm cream); .sticky background #fffef8 (near-white).
• .titles: position: absolute; top: 0; left: 0; width: 400vw; height: 100vh; display: flex; will-change: transform;. Each .title: position: relative; flex: 1; flex-centered. Each .title h1: position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 9vw; font-style: italic; will-change: transform; — the three copies sit exactly on top of each other.
• Title copy colors (stacking order matters — .title-3 is last in DOM so it paints on top): h1.title-1 { color: #dafa6c; } (lime), h1.title-2 { color: #10d0f4; } (cyan), h1.title-3 { color: #1f1f1f; } (near-black).
• .images: position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 200vw; height: 200vh; transform-style: preserve-3d; perspective: 2000px; z-index: -1; — it sits BEHIND the titles.
• .card: position: absolute; width: 200px; height: 200px; border-radius: 2em; background: #c0c0c0; transform-style: preserve-3d; will-change: transform; overflow: hidden;.

GSAP effect (exhaustive)

Register ScrollTrigger.

Card creation (JS, before animation)

Create 10 cards in a loop (card card-1 … card card-10), each containing an <img> (images 1–10). Position each card via inline top/left percentages, in this exact order:

{ top: 30%, left: 55% }, { top: 20%, left: 25% }, { top: 50%, left: 10% },
{ top: 60%, left: 40% }, { top: 30%, left: 30% }, { top: 60%, left: 60% },
{ top: 20%, left: 50% }, { top: 60%, left: 10% }, { top: 20%, left: 40% },
{ top: 45%, left: 55% }

Append them to .images. Then initialize every card with gsap.set(card, { z: -50000, scale: 0 }) — they start 50,000px deep into the scene and invisible.

ScrollTrigger

One single ScrollTrigger.create({...}) drives everything:

• trigger: ".sticky", start: "top top", end: "+=" + (window.innerHeight * 5) + "px" (5 viewport heights of scroll), pin: true, scrub: 1.
• All animation happens in onUpdate(self) — there is no timeline; values are computed from self.progress (0→1) each tick.

1) Horizontal title reel

const moveDistance = window.innerWidth * 3 (the 400vw strip minus one screen). Every update: gsap.set(".titles", { x: -moveDistance * self.progress }). So the reel translates from x: 0 to x: -3 × viewportWidth linearly with progress, smoothed only by scrub: 1 and Lenis.

2) Velocity-based kinetic type jitter

Each update, read const velocity = self.getVelocity(), then:

• normalizedVelocity = velocity / Math.abs(velocity) || 0 (just the sign: -1, 0 or 1).
• maxOffset = 30; currentSpeed = Math.min(Math.abs(velocity / 500), maxOffset).
• isAtEdge = self.progress <= 0 || self.progress >= 1.

For each of the four .title blocks, grab its .title-1, .title-2, .title-3:

• If isAtEdge: snap the two color copies back — gsap.to([title1, title2], { xPercent: -50, x: 0, duration: 0.3, ease: "power2.out", overwrite: true }).
• Otherwise, with baseOffset = normalizedVelocity * currentSpeed:
• gsap.to(title1, { xPercent: -50, x: baseOffset * 4 + "px", duration: 0.2, ease: "power1.out", overwrite: "auto" }) (lime copy drifts furthest),
• gsap.to(title2, { xPercent: -50, x: baseOffset * 2 + "px", duration: 0.2, ease: "power1.out", overwrite: "auto" }) (cyan copy drifts half as far).
• Always: gsap.set(title3, { xPercent: -50, x: 0 }) — the dark top copy never moves.

xPercent: -50 keeps every copy horizontally centered (GSAP picks up the -50% vertical translate from the CSS transform), so the colored copies fan out behind the dark one only while scrolling fast, then spring back together.

3) 3D card fly-through (staggered by index, computed per tick)

For each card index (0–9), inside the same onUpdate:

• staggerOffset = index * 0.075 — each card starts its journey 7.5% of total progress after the previous one.
• scaledProgress = (self.progress - staggerOffset) * 3 — each card completes its full flight in one third of the scroll range.
• individualProgress = clamp(scaledProgress, 0, 1).
• targetZ = 2000 for cards 0–8, but 1500 for the LAST card (index 9) — since the perspective is 2000px, the first nine fly PAST the camera and out of view, while the final card stops just short and ends up covering the screen.
• newZ = -50000 + (targetZ + 50000) * individualProgress — linear interpolation from -50000 to targetZ.
• scale = clamp(individualProgress * 10, 0, 1) — the card pops from scale 0 to 1 within the first 10% of its own flight, then Z does the rest of the growing via perspective.
• Apply with gsap.set(card, { z: newZ, scale: scale }) (no tween — direct set every tick).

The result: cards emerge as tiny dots in the far distance, rush toward the viewer one after another and blow past the camera, while the title reel slides left; releasing the scroll makes the color-fringed titles settle back into a single solid word.

Assets / images

• 1 logo: a bold black italic outlined wordmark on transparent background (fictional studio name, e.g. "Kota Verge"), placed in the nav, ~120px wide.
• 10 photographic images for the cards, roughly square (they render in 200×200 rounded-corner cards with object-fit: cover, so 1:1 is ideal). Varied colorful editorial/lifestyle photos work best.

Behavior notes

• The pinned section consumes 5 viewport heights of scroll; total page = hero + pinned distance + outro.
• Everything is driven by one ScrollTrigger's onUpdate — no timelines, no stagger config; the stagger is hand-computed from index * 0.075.
• moveDistance and end are captured from window.innerWidth / window.innerHeight at load (no resize handling needed).
• Keep will-change: transform on .titles, .title h1 and .card for smoothness; z-index: -1 on .images keeps cards behind the titles, and overflow: hidden on sections prevents scrollbar blowout from the 400vw strip.