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.

Kanban board

Each column is a Reorder.Group, so cards shuffle smoothly within that list. Giving every Reorder.Item a layoutId adds the other half of a kanban board: the same card can be re-parented into another group without either column losing track of it.

Drag a card anywhere on the board, or focus one and use the arrow keys.

		{#each columns as column (column)}
	<Reorder.Group
		values={cards}
		onReorder={(next) => {
			if (previewColumn) return;
			reindex(next, column);
		}}
	>
		{#snippet children({ item: card })}
			{#if renderColumn(card) === column}
				<Reorder.Item
					value={card}
					layoutId={card.id}
					drag
					dragConstraints={{ top: 0, left: 0, right: 0, bottom: 0 }}
					dragElastic={1}
					onDrag={(event, info) => previewDrop(card, info)}
					onDragEnd={(event, info) => commitDrop(card, info)}
					whileDrag={{ scale: 1.04, rotate: -1.5, zIndex: 10 }}
				>
					{card.title}
				</Reorder.Item>
			{/if}
		{/snippet}
	</Reorder.Group>
{/each}
	

Every group receives the same stable card objects. The conditional chooses the one column that renders each card; when that choice changes during a drag, layoutId transfers the live gesture to the new list. The preview opens the target slot immediately, while release commits its column and order.

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.