Motionstable

ScrollStack

Full-height sections that slide over each other on scroll, and unstack back.

01 / 05

One

02 / 05

Two

03 / 05

Three

04 / 05

Four

05 / 05

Five

scrolls inside this frame

Scaled down to fit the frame: short cards and a small peek, so the whole deck is visible at once. On a page you would use full-height sections and no peek.

Customize

Layoutsize and sticky offsets

Card height44cqhheight

Per-section heightssizeMix

Sticky offset30 pxtop

Peek per card16 pxpeek

Corner radius20 pxrounded

Sections (demo only)5cards

Motionhow a covered card recedes

Scale down to0.900scaleTo

Dim overlay0.450dim

Dim colourdimColor

Fade to (see-through)1.000opacityTo

Lift up by0 pxliftTo

Blur0.00 pxblurTo

Easingeasing

Disable motion (plain sticky)disabled

Usage

TSX

import { ScrollStack } from "zerogravity"

<ScrollStack>
    <article>Card one</article>
</ScrollStack>

Generated from the controls above. Only props that differ from their defaults are shown.

Props

15 documented props on ScrollStack
Property	Type	Default	Description
`height`	`string`	`"44cqh"`	Card height. Range 20 to 90 cqh.
`top`	`number`	`30`	Sticky offset. Range 0 to 200 px.
`peek`	`number`	`16`	Peek per card. Range 0 to 80 px.
`rounded`	`number`	`20`	Corner radius. Range 0 to 48 px.
`scaleTo`	`number`	`0.9`	Scale down to. Range 0.6 to 1.
`dim`	`number`	`0.45`	Dim overlay. Range 0 to 1.
`dimColor`	`string`	`"#05050a"`	Dim colour.
`opacityTo`	`number`	`1`	Fade to (see-through). Range 0 to 1.
`liftTo`	`number`	`0`	Lift up by. Range 0 to 160 px.
`blurTo`	`number`	`0`	Blur. Range 0 to 20 px.
`easing`	`"smooth" \| "linear"`	`"smooth"`	Easing.
`disabled`	`boolean`	`false`	Disable motion (plain sticky).
`children`	`ReactNode`	`—`	One element per card. Each becomes a sticky section.
`heights`	`string[]`	`—`	Per-card height override, in place of the shared height.
`onActiveChange`	`(index: number) => void`	`—`	Fires when the front-most card changes.

Dependencies

0 external runtime dependencies

Ships with nothing but React.