Scroll Animations in 3D

Scroll-driven animation is what separates a website from an experience. The page becomes interactive by doing nothing other than scrolling. Objects rotate. Text reveals. Scenes shift. The user is in control of the animation even if they do not realise it.

This lesson builds a page where 3D elements respond directly to scroll position.

How scroll animation works

GSAP ScrollTrigger converts scroll position into animation progress.

At the top of the page at 0% scroll the animation is at its start state. At the bottom of the page at 100% scroll the animation is at its end state. Anywhere in between the animation is at a proportional point.

This is called a scrubbed animation where the animation is scrubbed back and forth like a video timeline as you scroll.

Three CDN links you need, loaded in this exact order:

• https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js
• https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js
• https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js

What you can animate on scroll

3D object rotation: as you scroll the object rotates. Common on product pages.

3D object scale: the object grows larger as it comes into view for an entrance effect.

Camera zoom or dolly: the camera moves forward into the scene as you scroll.

Particle system convergence: particles that are scattered at the top converge into a shape at the bottom.

Text reveal with 3D tilt: section headings slide in with a 3D tilt transform then settle flat.

Section transitions: each scroll section swaps which 3D object is displayed.

This lesson covers rotation on scroll and scale on scroll because they are the most reliable and visually impressive.

The scroll animation prompt

This prompt builds a multi-section page where a 3D object rotates and scales as the user scrolls through three distinct sections. Copy it and replace all placeholder values with your own.

Build me a multi-section website with scroll-driven 3D animation using Three.js and

GSAP ScrollTrigger. Exact specifications:

FILE STRUCTURE:

Three files: index.html, style.css, main.js

CDN links in the head in this exact order:

• https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js
• https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js
• https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js

PAGE SECTIONS:

The page has three sections each 100vh tall. The Three.js canvas is position: fixed,

full screen, z-index: -1. All three HTML sections scroll over this fixed canvas.

Section 1 — Hero:

Heading: [SECTION 1 HEADING]
Sub-text: [SECTION 1 SUBTEXT]

Text position: centred on the left side of the screen

Section 2 — About:

Heading: [SECTION 2 HEADING]
Body text: [SECTION 2 BODY]

Text position: centred on the right side of the screen

Section 3 — CTA:

Heading: [SECTION 3 HEADING]
Button: [BUTTON TEXT]

Text position: centred on screen

DESIGN:
Background: [BACKGROUND HEX]
Text colour: [TEXT HEX]
Accent: [ACCENT HEX]
Google Font: [FONT NAME]

3D OBJECT:

• Shape: [SHAPE — e.g. TorusGeometry with args (1.5, 0.4, 16, 100)]
• Material: [MATERIAL — e.g. MeshStandardMaterial, colour #a78bfa, metalness 0.4, roughness 0.4]
• Initial position: centred in the scene at z: 0

SCROLL ANIMATIONS using GSAP ScrollTrigger:

• Register ScrollTrigger with GSAP: gsap.registerPlugin(ScrollTrigger)
• Call this at the very top of main.js before any ScrollTrigger is used.

Animation 1 — Section 1 to Section 2 transition:

Trigger: section 2 entering viewport, scrub: true

Rotate the 3D object on Y axis by Math.PI which is 180 degrees

Scale the object from 1.0 to 0.7

Move the object X position from 0 to +2 so it slides right as text moves to the right side

Animation 2 — Section 2 to Section 3 transition:

• Trigger: section 3 entering viewport, scrub: true
• Rotate an additional Math.PI on Y axis for another 180 degrees totalling 360

Scale from 0.7 back to 1.2 which is slightly larger than the original

Move X position back to 0 to centre for the CTA section

LIGHTING:

Ambient: intensity 0.5

Point light 1: [ACCENT HEX] colour, intensity 1.5, position x:3 y:3 z:5

Point light 2: white, intensity 0.8, position x:-3 y:-1 z:3

CAMERA:

PerspectiveCamera with fov 50 positioned at z: 5

Camera is FIXED and does not move during scroll

SELF-CHECK BEFORE DELIVERING:

• Open in Chrome and confirm the 3D object is visible in section 1.
• Scroll slowly and confirm the object rotates and scales as scroll progresses.
• Confirm text in each section appears above the 3D canvas.

Refining after the first build

To make the rotation feel more dramatic: "Increase the total Y rotation to Math.PI multiplied by 3 which is 540 degrees across the full scroll distance."

To add a parallax effect to section headings: "For each section heading, add a GSAP ScrollTrigger that moves it from translateY(40px) and opacity 0 to translateY(0) and opacity 1 as the section enters the viewport. Use scrub: false and once: true so it triggers once and stays visible."

To add a colour shift on scroll: "Animate the 3D object's colour from [COLOUR A] to [COLOUR B] using GSAP to tween the material's colour value across the full scroll distance."

Testing scroll animations

Smooth animation: scroll slowly and the object should move proportionally and not jump or snap.

No jitter: if you see the object flickering or jumping frames, increase the scrub value. Try scrub: 1.5 instead of scrub: true.

Text above canvas: all three section headings should be readable above the 3D background at every scroll position.

Scroll to top and back: the animation should work identically in both scroll directions.

Common problems

If the object snaps instead of animating smoothly, replace scrub: true with scrub: 1. A number value adds a smoothing delay.

If GSAP says ScrollTrigger is not defined, the ScrollTrigger CDN must load after the GSAP CDN in the HTML head, and you must call gsap.registerPlugin(ScrollTrigger) at the top of main.js before any ScrollTrigger usage.

If the object disappears during scroll, the camera might be moving when it should be fixed. Check that no code is modifying camera.position.z in the scroll animations.

If section text is not showing, the HTML sections need position: relative and a z-index above the canvas which is at z-index: -1. Section content needs z-index: 1 at minimum.