scroll steps sequence onboarding process timeline onboarding or process rows with horizontal steps timeline sections that should play once in sequence how it works layouts with staged reveal timing all step items trigger at the same time in one viewport band need configurable pause between cards or milestones want a once-only sequence without per-item observers
Sequential Steps
Fetch snippet JSON:
curl https://webspire.de/snippets/scroll/sequential-steps.json One observer on the group, then each step follows with a fixed pause.
Background
Customize
Quick Start
<div class="sequential-steps is-visible"><article class="sequential-step">Step</article><article class="sequential-step">Step</article></div>Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- A11y
- prefers-reduced-motion
- Size
- 1155 bytes · 46 lines
- Custom Properties
-
--step-delay--step-duration--step-offset - Classes
-
.sequential-steps.sequential-step
scroll steps sequence onboarding process timeline
Apply .sequential-steps to the parent and .sequential-step to each item.
When the section becomes visible, add .is-visible once to the parent. Every child then animates in with a stagger based on its index, so horizontal step rows no longer reveal all items at the same moment.
Customize via CSS custom properties:
--step-delay— pause between items, default600ms--step-duration— duration of each reveal, default0.5s--step-offset— initial vertical offset before reveal, default18px
The snippet is CSS-only. The recommended trigger is one class toggle on the container via IntersectionObserver, then leave the class in place so the sequence plays only once.