Scroll-Driven 3D

Lesson 4

Pairing Three.js with GSAP ScrollTrigger lets the scroll position drive camera movement or object animation — the technique behind many high-end landing pages.

Setup

Load GSAP + ScrollTrigger as script tags before your module script, then register:

gsap.registerPlugin(ScrollTrigger);

The body has height 400vh so there’s room to scroll. The canvas stays position: fixed.

Animating the Camera

gsap.to(camera.position, {
  z: -5,
  y: 2,
  scrollTrigger: {
    trigger: document.body,
    start: 'top top',
    end: 'bottom bottom',
    scrub: 1,
  }
});

Rotating an Object on Scroll

gsap.to(mesh.rotation, {
  y: Math.PI * 2,
  x: Math.PI * 0.5,
  scrollTrigger: {
    scrub: 1,
    start: 'top top',
    end: 'bottom bottom',
  }
});

What to Experiment With

  • Change scrub: 1 to scrub: 0.3 for snappier response
  • Animate camera.fov and call camera.updateProjectionMatrix() for zoom-in
  • Add multiple sections with separate ScrollTrigger instances