Skip to main content

motion

The motion proxy drives most animations in Motion Start.

motion is a proxy: every HTML and SVG element is available on it as motion.div, motion.button, motion.circle, and so on. A motion component behaves exactly like its plain counterpart — same attributes, same events — plus animation props.

		<script>
	import { motion } from "motion-start";
</script>
 
<motion.div
	initial={{ opacity: 0 }}
	animate={{ opacity: 1 }}
	exit={{ opacity: 0 }}
	whileHover={{ scale: 1.05 }}
	transition={{ type: "spring" }}
/>
hover me
rotate
tap me

Animation props

initial
type: Target | VariantLabels | false
The state the component mounts in. `false` skips the mount animation.
animate
type: Target | VariantLabels | AnimationControls
The state to animate towards whenever it changes.
exit
type: Target | VariantLabels
The state to animate to before unmounting. Requires an `AnimatePresence` ancestor.
transition
type: Transition
How values animate. See [Transitions](/docs/animation/transitions).
variants
type: Variants
Named animation targets, so labels can be used instead of objects — and inherited by children.
style
type: MotionStyle
Like `style`, but transform shorthands (`x`, `y`, `scale`, `rotate`) and `MotionValue`s are accepted.

Gesture props

whileHover, whileTap, whileFocus, whileDrag and whileInView, plus their event handlers. See Gestures.

Layout props

layout, layoutId, layoutDependency, layoutRoot and layoutScroll. See Layout animations.

Lifecycle events

onAnimationStart
type: (definition) => void
onAnimationComplete
type: (definition) => void
onUpdate
type: (latest: ResolvedValues) => void

Transform shorthands

Transforms are independent values, so they can be animated separately and composed without fighting over a single transform string.

		<motion.div style={{ x: 100, rotate: 45, scale: 1.2 }} />

Available: x, y, z, translateX/Y/Z, scale, scaleX/Y, rotate, rotateX/Y/Z, skew, skewX/Y, originX/Y/Z, perspective.

SVG

SVG elements work the same way, including pathLength, pathSpacing and pathOffset, which are normalised to 0–1.

		<motion.path initial={{ pathLength: 0 }} animate={{ pathLength: 1 }} />

The m component

m is the same component with no features bundled in. Paired with LazyMotion it keeps the initial bundle small.

		<script>
	import { m } from "motion-start/m";
</script>
 
<m.div animate={{ opacity: 1 }} />