Scroll Parallax Layers — Free GSAP ScrollTrigger Snippet

Scroll parallax is the depth illusion where background layers drift slowly and foreground layers move quickly as you scroll, so the scene feels three-dimensional. This snippet builds a multi-layer parallax scene with GSAP and ScrollTrigger (from a CDN), driven entirely by a single data-speed attribute per layer.

Speed as data

Every parallax layer declares how fast it should move with a data-speed value — small numbers for distant layers (sky), larger ones for near layers (foreground). The script reads each value and creates a tween that translates the layer by yPercent: -40 × speed as the scene scrolls. Encoding speed in markup means adding or retuning a layer is a one-attribute change, and one loop wires them all up; there are no per-layer constants buried in the JavaScript.

Scrubbed across the scene

Each layer's tween is tied to a ScrollTrigger on the scene with start: 'top bottom' and end: 'bottom top', so the parallax plays across the entire time the scene is in view — from when its top enters the bottom of the viewport to when its bottom exits the top. scrub: true binds the motion to the scrollbar so the layers separate and re-converge smoothly as you scroll either direction. ease: 'none' keeps the speed differences constant and predictable.

Why differential speed reads as depth

Our eyes infer distance from motion parallax: things farther away appear to move less. By moving the sky a little and the foreground a lot for the same scroll, the snippet reproduces that cue, and the brain reads the flat layers as receding into space. The headline sits at a middle speed so it feels embedded in the scene rather than pasted on top.

Transform-only and smooth

All movement is yPercent (a GSAP transform), so the browser composites the layers on the GPU without reflowing or repainting layout — essential when several layers animate at once on every scroll frame. will-change: transform and overflow: hidden on the scene keep the moving layers contained and jank-free.

Asset-free scene

The layers are built from CSS radial gradients (sky glow, rolling hills, foreground ridge) so the snippet needs no images. In production you'd swap each layer's background for a transparent PNG or SVG; the parallax logic is unchanged because it only animates transforms.

Customizing it

Add more layers with their own data-speed, change the base travel multiplier, swap the gradients for real art, or add horizontal parallax with xPercent. Pair it with a parallax hero, a scroll zoom hero, or a hero parallax grid.