Parallax
Scroll-linked parallax effect where background images move at a different speed to foreground content, creating a sense of depth.
Introduction
The Parallax example shows how to build a full-page scrolling gallery where background images move at a different speed to the foreground text, creating a sense of depth. It also fades text in and out as each section moves through the viewport.
It uses three APIs from Motion:
useScrollto track how far each section has scrolled through the viewportuseTransformto map that scroll progress to image position and text opacity/position values- The
motioncomponent to apply those values as live styles