createScopedAnimate

createScopedAnimate creates an animate function bound to a scope element and settings. Selector strings resolve inside scope.current instead of the whole document, and every animation it starts is pushed onto scope.animations. It is the factory useAnimate() is built on, re-exported unchanged from Motion.

mode · live running open

// createScopedAnimate shuffles 0

scoped

ABC

outside

ABC

Usage

import { createScopedAnimate } from '@humanspeak/svelte-motion'

const card = document.querySelector('.card')!
const animateCard = createScopedAnimate({ scope: { current: card, animations: [] } })

// Only the .chip elements inside .card move.
animateCard('.chip', { x: 100 }, { duration: 0.4 })

import { createScopedAnimate } from '@humanspeak/svelte-motion'

const card = document.querySelector('.card')!
const animateCard = createScopedAnimate({ scope: { current: card, animations: [] } })

// Only the .chip elements inside .card move.
animateCard('.chip', { x: 100 }, { duration: 0.4 })

Options

Option	Default	Description
`scope`	none	`{ current, animations }`. Selectors resolve inside `current`; started animations are pushed onto `animations`. Accepts the scope from `useAnimate()`.
`reduceMotion`	`undefined`	When `true`, transform and layout values animate instantly, as `MotionConfig reducedMotion="always"` does.
`skipAnimations`	`undefined`	When `true`, every animation jumps straight to its final value.

When to use it instead of useAnimate

Use useAnimate() inside components: it wires the scope as an attachment, follows the nearest MotionConfig, and stops its animations when the element detaches.

Reach for createScopedAnimate outside components (actions, attachments, plain .ts modules) or when you own the element’s lifecycle. Its scope only collects animations; it doesn’t stop them. Call stop() on each entry in scope.animations when you tear the element down.

The exception is an active scopeMotion scope. A scoped animate called while one runs (inside a useScopeMotion setup, scope.current.run(), or a handler bound with bind()) registers each timeline with that scope. The timeline stops when the scope is cancelled, the same as upstream (framer-motion/src/animation/animate/index.ts: motionScope.add(() => timeline.stop())).

for (const animation of scope.animations) animation.stop()
scope.animations.length = 0

for (const animation of scope.animations) animation.stop()
scope.animations.length = 0

Returns

A function with the same call shapes as animate: elements and selectors, motion values, objects, and sequences. Every call returns a mutable Timeline (Motion 14.7).

Unlike the module-level animate, the scoped function has no addEffect / removeEffect statics. Register effects on animate itself.