Sticky Pin (Scroll-Pin Storytelling)
also known asscroll pinning · sticky scroll · scrollytelling
A scroll technique where an element pins to the viewport while surrounding content continues to scroll past it.
A sticky pin uses CSS position: sticky or a scroll-trigger library (GSAP ScrollTrigger, Framer Motion) to fix an element in place while the user scrolls through a longer narrative. The pinned element typically updates — text changes, an image swaps, a chart animates — driven by scroll progress.
It's the backbone of modern editorial scroll storytelling: New York Times explainers, Apple product pages, Stripe landing pages all rely on it. The pattern lets you tell a sequenced story without forcing the user into a slideshow.
- Multi-step product explainers
- Editorial features with sequenced visuals
- Long landing pages where one hero needs to anchor multiple sections
- Short pages — there's no scroll distance to fill
- Mobile-first contexts where viewport height is small
- +Define a clear scroll distance (300vh or 4× viewport)
- +Provide a fallback for users with reduced motion
- +Update content based on scroll progress, not raw pixels
- −Don't pin more than one element at a time
- −Don't pin elements taller than the viewport — they'll clip
People also ask
What's the simplest way to pin an element on scroll?
CSS `position: sticky; top: 0;` works for basic cases. For step-by-step content updates use GSAP ScrollTrigger or Framer Motion's useScroll().