Components/Scroll-Linked Animations18 / 25

Scroll-Linked Animations

scrollAdvancedRead the docs Open Playground

Code

// No linked animation or callbacks here: progress is read each scroll
// tick and mapped to per-layer transforms manually.
const { ref, containerRef, isInView, progress } = useAnimeOnScroll({
  enter: 'bottom top',
  leave: 'top bottom',
});

const p = Math.max(0, Math.min(1, progress));
const ty = p * layer.depth * -56; // depth drives parallax rate

<div ref={containerRef} style={{ overflowY: 'auto' }}>
  <div ref={ref}>
    {layers.map((layer) => (
      <div style={{ transform: `translateY(${p * layer.depth * -56}px)` }}>
        {layer.label}
      </div>
    ))}
  </div>
</div>

Scroll-driven parallax — layer translate/opacity derived from scroll progress.

Live previewOpen Playground

Scroll-Linked AnimationsParallax depth · scroll scrub

Scroll ↓

Scroll inside the panel to scrub the parallax

mid

000

Props

Name	Type	Default	Description
enter	string	-	Enter boundary (e.g. 'bottom top')
leave	string	-	Leave boundary (e.g. 'top bottom')
ref	RefObject<T>	-	Observed trigger element
containerRef	RefObject<T>	-	Inner scroll container
progress	number	-	Clamped 0-1 scroll progress
isInView	boolean	-	True when trigger is in viewport
linked	ScrollLinkedTarget	-	Optional: animation to scrub (not used in this demo)

Related components

On Scroll

Scroll-linked animation with enter/leave callbacks and progress tracking

✦

ClipPath Reveal

Circle, diamond, star, and wipe clipPath reveal animations

Hover me

Tooltip

Hover or focus trigger with spring enter/exit and smart placement

Reorder List Scramble Text

1	// No linked animation or callbacks here: progress is read each scroll
2	// tick and mapped to per-layer transforms manually.
3	const { ref, containerRef, isInView, progress } = useAnimeOnScroll({
4	enter: 'bottom top',
5	leave: 'top bottom',
6	});
7
8	const p = Math.max(0, Math.min(1, progress));
9	const ty = p * layer.depth * -56; // depth drives parallax rate
10
11	<div ref={containerRef} style={{ overflowY: 'auto' }}>
12	<div ref={ref}>
13	{layers.map((layer) => (
14	<div style={{ transform: `translateY(${p * layer.depth * -56}px)` }}>
15	{layer.label}
16	</div>
17	))}
18	</div>
19	</div>