Tab Scroll Action
Tab with scroll action
Overview
Renders a set of feature cards that stack on top of each other as progress (0--1) advances. Intended to be driven by a scroll hook: as the user scrolls through a sticky section, progress increases and each card slides into view above the previous one.
Usage
import { TabScrollAction } from '@leanicon/web-builder-library'Interactive scroll demo
Scroll inside the container to drive the animation. Cards stack on top of each other as you scroll down.
Protect
Keep your data safe with enterprise-grade security controls and compliance certifications.
First card active (progress = 0)
The first card is visible; subsequent cards are off-screen below.
Protect
Keep your data safe with enterprise-grade security controls and compliance certifications.
Mid progress (progress = 0.33)
Second card slides into view over the first.
Protect
Keep your data safe with enterprise-grade security controls.
End progress (progress = 1)
All cards stacked — last card is fully visible on top.
Protect
Keep your data safe with enterprise-grade security controls.
Sharp corners
Custom card background
Two items only
Without images
Dark mode
Protect
Keep your data safe with enterprise-grade security controls.
Mid progress — dark mode
Sharp corners — dark mode
Props
Prop | Type | Default | Description |
|---|---|---|---|
|
| — | Array of feature cards (required) |
|
| — | Scroll progress 0--1 (required) |
|
|
| Tailwind border-radius for cards |
|
|
| Tailwind border-radius for images |
|
|
| Tailwind background class for cards |
|
| — | Force light or dark mode |
|
| — | Additional CSS classes on root |
TabScrollActionItem
Field | Type | Description |
|---|---|---|
|
| Uppercase monospace label (required) |
|
| Card heading (required) |
|
| Card description (required) |
|
| Feature image |
|
| Call-to-action button |
Notes
- Card 0 is always at the base position and sets the container height. Cards 1+ slide up from off-screen.
progressis clamped to[0, 1]internally.- In production, drive
progresswith a scroll hook (e.g. Intersection Observer oruseScrollfrom Motion). - Dark mode: pass
colorScheme="dark"or place inside a.darkancestor.
Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
items | TabScrollActionItem[] | — | Yes | |
progress | number | — | No | 0–1 scroll progress across the items. When omitted, the component drives itself from its own scroll position (tall section + sticky inner) so each card occupies roughly one viewport of scroll travel. |
cardRadius | string | — | No | |
imageRadius | string | — | No | |
cardBackground | string | bg-secondary | No | |
headerOffsetRem | number | 0 | No | Height (in rem) of a sticky/fixed header above this section, e.g. a pinned navbar. In the self-driven (sticky) scroll mode the pinned cards are offset down by this amount and sized to fit the remaining viewport, so the stacked tab bars never slide underneath the header. Default `0`. |
colorScheme | enum | — | No | |
className | string | — | No |