Tell a story in steps: the section stays in view while the visitor scrolls and the parts appear one by one. Every scroll movement reveals the next step — ideal for a workflow or process. The technical name is GsapScrollSteps.
Use this block when a process needs explaining without forcing the visitor to click through separate pages — onboarding flows, 'how it works' sections and checkout explainers all benefit from the pinned-scroll effect. Because the section stays fixed while the steps advance, attention stays on one spot instead of scattering across the page.
A common example is a SaaS page that explains setup in three or four steps: connect an account, configure a rule, go live. Each step gets its own short heading, and scrolling becomes the interaction instead of a 'next' button. See GsapReveal for a simpler one-shot reveal, or GsapPin for pinning without stepped content.
Typical use cases
On a webshop, GsapScrollSteps works well for a 'how ordering works' section: cart, checkout, shipping, delivery, each step pinned in turn instead of four static blocks fighting for attention. On a portfolio or case-study page it can walk through a project's challenge, approach and result without forcing a click through separate pages, keeping the reader in a single scroll session. For a professional-services site it suits an explanation of a service methodology — intake, proposal, execution, delivery — where the sequence itself is part of the pitch.
Pitfalls, combinations and accessibility
The most common mistake is cramming too much into a single step: because the section is pinned, a step with several paragraphs of text forces visitors to scroll a long distance without visual progress, which feels stuck rather than guided. Keep each step to a short heading and one or two lines, and keep the total count to three or five steps — beyond that the pinned scroll distance grows uncomfortably long, especially on mobile where viewport height is already limited. Nesting a GsapScrollSteps section inside another pinned or sticky element also tends to break the scroll-trigger calculations, so give it its own unpinned section.
Combine steps with GsapCounter when a step should reveal a statistic rather than just text, or with Icon to give each step a small marker that reinforces its position in the sequence. Because the block only cares about its immediate children, any Chakra layout — a two-column split with an image on one side and the step text on the other — works inside each step.
Visitors with reduced-motion preferences still get the content — the block falls back to a normal, unpinned reveal rather than skipping steps entirely — but keep the pinned scroll distance modest regardless, since a very long pin can feel disorienting on a trackpad or with momentum scrolling. Avoid placing large images inside a step; because the section stays fixed while scrolling, a heavy image forces the whole browser to keep repainting the same fixed area, which is a more visible performance cost than a normal in-flow image.
Example
Step 1 — Say what you want
Step 2 — The assistant builds it
Step 3 — Your site is live
The prompt for this example
Create a section that reveals these three steps one by one while scrolling: 'Say what you want', 'The assistant builds it', 'Your site is live'.