ScrollTrigger Pinning, Explained Simply

Pinning is the effect behind almost every scroll-driven story on the web: a section freezes on screen, content plays out inside it, then the page moves on. In GSAP's ScrollTrigger it is one property: pin: true. When the trigger's start point hits, ScrollTrigger sets the element to position: fixed and inserts a pin-spacer element that preserves the space it occupied, so the layout below does not jump. The element stays fixed until the end point, then returns to normal flow. The gap between start and end is the pin duration, measured in scroll distance, not seconds. An end of '+=2000' pins for 2000 pixels of scrolling.

When should you pin?

• Feature walkthroughs where each scroll step reveals a new panel inside a held frame.
• Horizontal scroll sections, which are a pinned container with a sideways scrubbed animation.
• Hero sections that hold while a headline sequence plays out.

Combine pinning with scrub and the user drives the animation with the scrollbar. Combine it with toggleActions and the animation plays on its own once the pin engages. Both are legitimate; they feel completely different.

Seeing it in practice

The pinned process section in the Atlas agency template is a working reference you can read line by line, since the whole site is one HTML file. And if you want to build pinned sequences yourself, the pinning module in Scroll Animation Mastery covers pin-spacer behavior, nested pins, and the common pitfalls like pinning inside transformed parents. Once pinning clicks, most premium scroll layouts stop looking like magic and start looking like variations on one idea.