Examples

Every demo below is live — the same components used throughout the rest of these docs, collected in one place. Each links to the page that explains it.

Transitions

Springs are the default for transforms. Everything else eases.

		<motion.div animate={{ x: 100 }} transition={{ type: "spring", stiffness: 300 }} />
	

Read more in Transitions.

Variants and stagger

Variants let a parent orchestrate its children, so a list can cascade without any per-item timing.

		<motion.ul variants={container} initial="hidden" animate="visible">
	{#each items as item (item)}
		<motion.li variants={child} />
	{/each}
</motion.ul>
	

Read more in Animation overview.

Gestures

whileHover and whileTap are transient states — release the gesture and the element returns to whatever animate says, with no bookkeeping.

		<motion.button whileHover={{ scale: 1.08 }} whileTap={{ scale: 0.96 }} />
	

Drag

		<motion.div drag dragConstraints={{ left: -80, right: 80 }} dragElastic={0.2} />
	

Read more in Gestures.

Layout animations

layout measures the element before and after a change and animates the difference with transforms, so you can animate properties that are otherwise far too expensive.

		<motion.div layout />
	

Shared layout

A layoutId moves a single element between positions — the classic animated tab indicator.

		<motion.span layoutId="tab-pill" />
	

Read more in Layout animations.

Exit animations

AnimatePresence keeps an element in the DOM long enough to animate out.

		<AnimatePresence>
	{#if visible}
		<motion.div exit={{ opacity: 0, scale: 0.9 }} />
	{/if}
</AnimatePresence>
	

Read more in AnimatePresence.

Reorder

		<Reorder.Group axis="y" bind:values={items}>
	{#each items as item (item)}
		<Reorder.Item value={item} />
	{/each}
</Reorder.Group>
	

Read more in Reorder.

Motion values

A motion value updates outside the component lifecycle, so you can drive an animation every frame without re-rendering.

		const x = useMotionValue(0);
const opacity = useTransform(x, [-100, 0, 100], [0, 1, 0]);
	

Read more in Motion values.