3D Parallax Reveal Footer

3D Parallax Reveal Footer

Goal

Build a full-page scroll layout where the last screen is a dark footer that is pinned behind the page and "un-parallaxes" into place as you scroll to it. The footer's inner content starts pushed up (translateY(-35%)) and slides down to 0% while a semi-transparent Three.js GLB model living inside the footer dollies toward the camera (z: -1 → 0) and un-tilts (rotation.x: 0.5 → 0) — both driven by the same scrubbed ScrollTrigger. On top of that, a requestAnimationFrame loop adds mouse parallax, lerping the model's rotation toward pointer-driven targets. Smooth scroll via Lenis.

Tech

Vanilla HTML/CSS/JS with ES module imports. Use gsap (npm) plus the GSAP plugin ScrollTrigger, lenis for smooth scroll, and three for the WebGL model (import three and GLTFLoader from three/addons/loaders/GLTFLoader.js). No framework, no bund-specific APIs. Register the plugin with gsap.registerPlugin(ScrollTrigger).

Layout / HTML

Body is a vertical stack of three full-height spacer sections followed by the footer:

<section class="one"><h1>Section 1</h1></section>
<section class="two"><h1>Section 2</h1></section>
<section class="three"><h1>Section 3</h1></section>

<footer>
  <div class="footer-container">
    <div id="footer-canvas"></div>          <!-- Three.js renderer mounts here -->

    <div class="footer-content">
      <div class="footer-row">
        <div class="footer-col">
          <h2>Restoring meaning to the things we build</h2>
        </div>
        <div class="footer-col">
          <div class="footer-sub-col">
            <h3>Work resumes</h3>
            <h3>2026</h3>
          </div>
          <div class="footer-sub-col">
            <a href="#">Write to me</a>
            <a href="#">Professional orbit</a>
            <a href="#">Loose thoughts</a>
            <a href="#">Long form</a>
          </div>
        </div>
      </div>

      <div class="footer-row">
        <p>Experiment 518</p>
        <p>Built by Motionprompts</p>
      </div>
    </div>
  </div>
</footer>

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

Key classes the JS/CSS depend on: .footer-container (the element that gets the translateY parallax), #footer-canvas (Three.js mount), .footer-content, .footer-row, .footer-col, .footer-sub-col. The scroll trigger targets the raw footer element.

Styling

Fonts — load from Google Fonts: DM Sans (full optical/weight range) and Stack Sans Notch (weights 200..700). body uses "Stack Sans Notch", sans-serif; p uses "DM Sans", sans-serif.

Color tokens

• --base-100: #d6eed9 (pale mint) — section one bg, text black
• --base-200: #b30078 (magenta) — section two bg, text white
• section three bg #ffa630 (orange), text black
• --base-400: #171717 (near-black) — footer bg, text white

Type scale (all headings font-weight: lighter; line-height: 1.25)

• h1: clamp(4rem, 5vw, 6rem)
• h2: clamp(3rem, 4vw, 5rem)
• h3 and a: clamp(1.25rem, 1.75vw, 2.5rem), font-weight: lighter
• a: color: #fff, no underline
• p: DM Sans, 0.9rem, weight 400

Reset / global

• * { margin:0; padding:0; box-sizing:border-box }
• Hide scrollbar: ::-webkit-scrollbar { display:none }

Sections — position: relative; width: 100%; height: 100svh; padding: 2rem; display:flex; justify-content:center; align-items:center; z-index: 1. The z-index:1 and opaque backgrounds are what make the three sections cover the footer while scrolling; the footer is revealed only as those sections scroll away.

Footer — position: relative; width: 100%; height: 75svh; background: #171717; color: #fff; overflow: hidden (overflow hidden clips the parallaxing content and the oversized canvas).

.footer-container — position: relative; width:100%; height:100%; padding: 2rem; display:flex; flex-direction:column; justify-content:space-between; transform: translateY(-35%); will-change: transform. This is the initial parallax offset the scroll animation drives back to 0.

#footer-canvas — position:absolute; inset: 0 auto auto 0; top:0; left:0; width:100%; height:100%; pointer-events:none; opacity: 0.5; z-index: -1 (sits behind the text, dimmed).

.footer-content — position:relative; width:100%; height:100%; display:flex; flex-direction:column; justify-content:space-between; z-index: 1.

.footer-row — display:flex; justify-content:space-between.

• First row, col 1: flex: 3. First row, col 2: flex: 2; display:flex; gap: 2rem.
• .footer-sub-col: flex:1; display:flex; flex-direction:column; gap: 0.5rem.
• .footer-row h2 { width: 75% }.

Responsive @media (max-width:1000px): first .footer-row becomes flex-direction: column; gap: 4rem; .footer-row h2 becomes width: 100%.

GSAP + Three.js effect (be exact)

Wrap everything in DOMContentLoaded.

1. Lenis smooth scroll wiring

const lenis = new Lenis();
lenis.on("scroll", ScrollTrigger.update);
gsap.ticker.add((time) => lenis.raf(time * 1000));
gsap.ticker.lagSmoothing(0);

2. Normalized mouse tracking

Keep a mouse = { x: 0, y: 0 } object. On mousemove:

• mouse.x = (e.clientX / window.innerWidth) * 2 - 1 → range −1..1
• mouse.y = -(e.clientY / window.innerHeight) * 2 + 1 → range −1..1 (Y inverted for WebGL space)

3. Three.js scene

• Mount into #footer-canvas (call it container).
• scene = new THREE.Scene().
• camera = new THREE.PerspectiveCamera(50, container.offsetWidth / container.offsetHeight, 0.1, 1000); camera.position.set(0, 0, 0.75).
• renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true }); renderer.setSize(container.offsetWidth, container.offsetHeight); renderer.setPixelRatio(window.devicePixelRatio); append renderer.domElement to the container.
• One light: const directionalLight = new THREE.DirectionalLight(0xffffff, 5); directionalLight.position.set(1, 1, 0); scene.add(directionalLight).

4. Load and normalize the GLB

Two module-scope base vars: let modelBaseRotationX = 0.5; and let modelBaseZ = -1;. Load with GLTFLoader from /c/3d-parallax-footer/model.glb. In the callback:

• model = gltf.scene.
• Compute bounds: const box = new THREE.Box3().setFromObject(model); const center = box.getCenter(new THREE.Vector3()); const size = box.getSize(new THREE.Vector3());
• Recenter and place: model.position.sub(center); model.position.y = 0; model.position.z = -1; model.rotation.x = 0.5;
• Fit to unit size: const maxDim = Math.max(size.x, size.y, size.z); model.scale.setScalar(1 / maxDim);
• scene.add(model).

5. Scrubbed ScrollTrigger (the reveal) — the star

ScrollTrigger.create({
  trigger: "footer",
  start: "top bottom",     // begins when footer's top hits viewport bottom
  end: "bottom bottom",    // ends when footer's bottom hits viewport bottom
  scrub: true,
  onUpdate: (self) => {
    const progress = self.progress;                 // 0 → 1
    const yValue = -35 * (1 - progress);            // -35% → 0%
    gsap.set(footerContainer, { y: `${yValue}%` }); // un-parallax the content
    modelBaseZ = -1 * (1 - progress);              // model dolly base: -1 → 0
    modelBaseRotationX = 0.5 * (1 - progress);     // model tilt base: 0.5 → 0
  },
});

footerContainer is document.querySelector(".footer-container"). Note the trigger does not animate the model directly — it only rewrites the two base targets, and the rAF loop below eases the model toward them. There is no pin and no timeline; it is a single scrub tied to progress with gsap.set.

6. requestAnimationFrame loop (mouse parallax + eased follow)

function animate() {
  requestAnimationFrame(animate);
  if (model) {
    const targetRotationY = mouse.x * 0.3;                        // yaw from pointer X
    const targetRotationX = -mouse.y * 0.2 + modelBaseRotationX;  // pitch from pointer Y + scroll base
    model.rotation.y += (targetRotationY - model.rotation.y) * 0.05;
    model.rotation.x += (targetRotationX - model.rotation.x) * 0.05;
    model.position.z += (modelBaseZ - model.position.z) * 0.05;   // eased dolly toward scroll base
  }
  renderer.render(scene, camera);
}
animate();

The lerp factor is 0.05 on all three (rotation.y, rotation.x, position.z), giving a soft, laggy follow. Pointer amplitude: ±0.3 rad yaw, ±0.2 rad pitch. The scroll base values (modelBaseZ, modelBaseRotationX) are constantly folded in, so scroll and mouse compose in the same loop.

7. Resize

On window resize: camera.aspect = container.offsetWidth / container.offsetHeight; camera.updateProjectionMatrix(); renderer.setSize(container.offsetWidth, container.offsetHeight).

Assets

• One GLB 3D model (/c/3d-parallax-footer/model.glb): a single small decorative/sculptural object. It is auto-centered, auto-scaled to a unit bounding box, lit by one white directional light, rendered on a transparent canvas at 50% opacity behind the footer text. Treat it as an ambient background element, not a hero object — any compact glTF/GLB mesh works. No raster images are used anywhere in the component.

Behavior notes

• The three opaque, full-height sections physically cover the footer (via z-index + solid backgrounds); the footer only appears as they scroll off, which is what sells the "reveal from behind" illusion together with the translateY(-35%) → 0 parallax.
• The model motion is intentionally decoupled from the scrub: the ScrollTrigger sets *targets*, the rAF loop *eases* toward them, so the model keeps drifting/settling even after scroll stops.
• WebGL canvas uses pointer-events: none; mouse parallax reads from window mousemove, so it works even though the canvas ignores pointer events.
• No reduced-motion guard in the original; the loop runs continuously. Everything degrades gracefully if the GLB fails to load (the if (model) guard just skips the model updates and the footer still parallaxes).