Glossário

Glossary — Motion

AnimatePresence — wrapper component that keeps a component mounted long enough to run its exit animation before removal from the DOM (Ch 1-30 area, React).

animate() — the core imperative animation function (mini and hybrid versions); takes an element/selector, a target, and options.

Drag gesture — the drag prop family (drag, dragConstraints, dragElastic, dragMomentum, dragTransition) that makes a motion component draggable with pointer input.

Easing function — a function mapping animation progress (0-1) to eased progress; Motion supports named eases, cubic-bezier arrays, and custom functions.

Exit animation — the exit prop on a motion component, played when the component is removed from the tree, requires AnimatePresence in React.

Gesture propswhileHover, whileTap, whileDrag, whileFocus, whileInView: declarative animation states tied to a specific interaction.

Keyframes — an array passed to an animatable value (e.g. x: [0, 100, 0]) to define a multi-step animation in one prop.

Layout animation — the layout prop; Motion detects layout changes (position/size) and animates between them automatically using the FLIP technique.

LayoutGroup — groups multiple components so their layout animations are aware of each other (e.g. shared layout transitions across siblings).

Motion component — the <motion.div>, <motion.svg>, etc. wrapper that adds animation/gesture/layout capability to any HTML or SVG element.

motion value — a value created with useMotionValue/useSpring/useTransform, updates outside React's render cycle for high-performance animation.

MotionConfig — a context provider for setting default transition/reduced-motion behavior for all motion components beneath it.

Orchestration — coordinating multiple animations in time using delayChildren, staggerChildren, and variant propagation from parent to child.

Reorder — the Reorder.Group/Reorder.Item components for building drag-to-reorder lists with automatic layout animation.

Spring transition — a physics-based transition type (type: "spring") defined by stiffness, damping, and mass (or duration/bounce).

Stagger — delaying each child's animation start by an increasing offset, set via staggerChildren in a parent variant's transition.

Tween transition — a duration-based transition type (type: "tween"), the default for most values, uses an easing curve over a fixed duration.

useAnimate — a hook returning a scope ref and an animate function scoped to that ref's subtree, for imperative sequences.

useInView — a hook that returns whether an element is currently in the viewport, commonly used to trigger scroll-triggered animations.

useMotionValue — creates a standalone motion value not tied to a motion component, can be read/written imperatively.

useScroll — a hook exposing scroll progress (of the page or a specific element) as motion values, the base for scroll-linked animation.

useSpring — creates a motion value that animates to its target using spring physics, can track another motion value.

useTransform — derives a new motion value from one or more source motion values via a mapping function or input/output range.

useVelocity — derives a motion value representing the rate of change of another motion value.

Variants — named animation states ({ hidden: {...}, visible: {...} }) referenced by name in initial/animate/exit, propagate automatically to children.

View Transitions bridge — Motion's animateView(), wraps the browser's native View Transitions API with Motion's animation controls.