WBL effects shelf · batch 3 (GSAP) · #07

Layered depth parallax

An illustrated scene (sky, hills, house, fence) where each layer moves at its own speed as you scroll past, so it looks deep.

✓ OK to use Not on the never list (batch 1 has single-photo parallax; this is several layers). Caution: one band per page, layers move a few pixels and never sit behind text.

Best for: Landscapers, pool builders, roofers and other outdoor businesses with an illustrated band.
How: Each SVG layer gets its own y range on one timeline; ScrollTrigger maps the band's trip through the screen to timeline progress (eased, not pinned).
Weight: 1.2 KB gzipped (our CSS + JS) + GSAP from jsDelivr: GSAP core 28.3 + ScrollTrigger 18 KB gzipped. Plugins: ScrollTrigger.