Temporarily pins a block in view while the rest of the page scrolls on underneath — keeping an important message or visual in front of the visitor for a moment. You decide how long it stays. The technical name is GsapPin.
Use GsapPin when a message, image or call to action needs a moment of guaranteed visibility before the visitor scrolls past it — a key statistic, a product screenshot next to scrolling explanatory text, or a short announcement banner. The pin duration is controlled with the end value, so you decide exactly how much scroll distance it stays fixed for.
A common pattern is pinning an image on one side while related text scrolls past on the other, giving the effect of the text explaining the fixed visual as the visitor reads down the page.
When pinning helps
On a webshop's product page, pinning a product image while related detail text scrolls past on the other side keeps the visual reference in view exactly while it's being explained. On a portfolio site, pinning a project's key visual while a case study's narrative scrolls alongside it creates a clear cause-and-effect between the text and the image it's describing. On a professional services page, pinning a short value proposition or key statistic for a moment near the top of the page keeps it in view a beat longer than a normal scroll would allow, before the rest of the content takes over.
The most common mistake is pinning for too long a scroll distance — visitors who scroll quickly can feel like the page has stopped responding if a pin holds for far longer than the content next to it takes to read. Test the end value against how long the accompanying content actually takes to scroll past, rather than picking a round number. Pinning is also easy to misuse on mobile, where narrower viewports mean pinned content and the elements around it can end up cramped; check the effect specifically at phone widths before shipping it.
Combine GsapPin with GsapReveal if you want the pinned content itself to fade or slide into view the moment the pin engages, rather than being static the whole time it's fixed. Use it alongside regular body text or a RichText block for the scrolling side of the layout, since the pin only makes sense relative to something moving past it.
The pinned element stays in the same place in the document's reading order — only its visual position is temporarily fixed — so screen readers encounter the content in the same order it would appear without the pin, and no information depends on the animation to be understood.
Example
This block stays in place for a moment while you keep scrolling
The prompt for this example
Put a text block on the page that stays pinned for a moment while you keep scrolling.