Scope

coreAdvancedRead the docs Open Playground

Code

// A single useAnime() with a CSS selector scopes the animation to every
// matching element inside the component. `stagger` ripples the tween across
// the matched targets. autoplay:false + controls.restart() = click-to-play.
const { controls } = useAnime({
  selector: '.scope-dot',
  scale: [
    { to: 1.5, duration: 200 },
    { to: 1, duration: 300 },
  ],
  stagger: 50,
  autoplay: false,
})

// Trigger re-runs the same scoped tween against all dots.
<button onClick={() => controls.restart()}>Trigger</button>

Scoped animation contexts — one useAnime call targets many elements via a selector.

Live previewOpen Playground

ScopeScoped animation contexts

Props

Name	Type	Default	Description
selector	string	-	CSS selector scoping the animation to multiple elements
scale	object[]	-	Keyframes with per-segment { to, duration }
stagger	number	0	Delay ripple between matched targets
autoplay	boolean	false	Start on mount (false = trigger via controls)
controls.restart	function	-	Re-run the scoped animation

Related components

✦

Basic Animation

Animate targets with CSS selectors, stagger, easing, and callbacks

⋮

Layout

FLIP-based layout animations with enter/exit, stagger, and methods

React

Split Text

Text splitting into chars, words, lines with CJK and effects

Layout Split Text

1	// A single useAnime() with a CSS selector scopes the animation to every
2	// matching element inside the component. `stagger` ripples the tween across
3	// the matched targets. autoplay:false + controls.restart() = click-to-play.
4	const { controls } = useAnime({
5	selector: '.scope-dot',
6	scale: [
7	{ to: 1.5, duration: 200 },
8	{ to: 1, duration: 300 },
9	],
10	stagger: 50,
11	autoplay: false,
12	})
13
14	// Trigger re-runs the same scoped tween against all dots.
15	<button onClick={() => controls.restart()}>Trigger</button>