Sticky Scroll
A visual element stays pinned on screen while text content scrolls beside it. Each step updates the pinned visual — classic Apple-style storytelling.
Also called: scroll pinning, sticky section, scrollytelling
📱
Step 01
Discover
Users land on your page and see a bold hero. The product visual stays fixed while the story unfolds.
Step 02
Engage
As they scroll, each section highlights a feature. The pinned element updates to match.
Step 03
Convert
By the end, they understand the value. The visual has transformed alongside the narrative.
How it works
CSS position: sticky pins the visual. JavaScript uses Intersection Observer on each step to update the pinned element when a step becomes active.
- GSAP ScrollTrigger's
pinoption does this with more control - Common on product pages, portfolios, and landing pages