Parallax Hero
A layered hero where every element scrolls at its own speed, scrubbed by ScrollTrigger for real depth
Layered Hero
Scroll through the hero. The gradient blobs drift slowly in the background, the headline moves at mid speed and fades as it leaves, and the label strip races ahead in the foreground:
GSAP Vault
Depth
In Motion
After The Hero
Scroll back up and watch the layers separate again. The effect is fully scrubbed, so it plays forwards and backwards with the scrollbar:
How it reads
Three speeds, one scrollbar
The background blobs use a speed of 0.2, so they barely move while the page scrolls past them. The headline sits at 0.7, close to normal scroll speed, and fades out as the hero leaves the viewport. The label strip uses 1.3, moving faster than the scroll itself, which pushes it into the foreground.
Each layer is a single scrubbed tween on yPercent, so the whole hero costs one ScrollTrigger and a handful of GPU-accelerated transforms.