Items that bounce and stick to the center while scrolling.
Unlock the source code and CLI installation with a one-time license.
Point scrollTargetRef at a tall scroll container with a sticky inner wrapper; the items bounce and stick to the center as that container scrolls through the viewport.
const scrollTargetRef = useRef<HTMLDivElement>(null)
<div ref={scrollTargetRef} className="relative h-[300vh]">
<div className="sticky top-0 flex h-screen items-center justify-center gap-2">
<ElasticStick scrollTargetRef={scrollTargetRef}>
{images.map((src) => (
<img key={src} src={src} alt="" className="aspect-[5/7] w-[30vw] object-cover" />
))}
</ElasticStick>
</div>
</div>| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | The items to animate. Any JSX element allowed. |
staggerValue | number | 0.03 | Time offset between each child's animation start. |
scrollTargetRef | RefObject<HTMLElement | null> | undefined | Reference to the scroll target element. |