Pinned section
A section that sticks in the viewport while you keep scrolling, so the scroll drives what happens inside it.
See it
What it is
The section parks itself in the viewport and stays there while you keep scrolling. The scroll distance you spend 'stuck' gets spent on the content inside instead: steps advancing, a chart building, panels sliding horizontally. Two ways to build it: CSS 'position: sticky' on a child of a deliberately tall parent, or GSAP ScrollTrigger with 'pin: true', which wraps the element and inserts a spacer for you.
This is the backbone of scrollytelling and of most product pages that explain three features in one viewport. Rule of thumb: give the pin roughly 100vh of extra scroll per beat you want the user to read, and never pin something taller than the viewport, since the top or bottom becomes unreachable.
Gotcha: 'position: sticky' fails silently. Any ancestor with 'overflow: hidden', 'overflow: auto', or 'overflow: scroll' kills it, because each of those makes a scroll container and the element sticks inside that instead of the page ('overflow: clip' is the safe one, it does not create a scroll container). A parent with no extra height to scroll through kills it too. On the GSAP side, pinning rewrites document height, so a pinned section above the fold will make every other trigger's positions stale until you call ScrollTrigger.refresh() after fonts and images land.
Ask AI for it
Make this section pinned: it should stick to the viewport while the user scrolls through about 300vh of scroll distance, during which three content panels cross-fade through in sequence, then the page resumes normal scrolling. Use GSAP ScrollTrigger with 'pin: true' and 'scrub: 1' (or a 'position: sticky' child inside a tall wrapper if no library is available). Keep the pinned element shorter than the viewport, add a progress indicator for the three steps, and call ScrollTrigger.refresh() after images load so the offsets stay correct.