Enter and exit animations
Also called exit animation or mount and unmount animation
The pair of animations an element plays as it is added to the page and as it is removed, so changes to a list or layout are easy to follow.
import { AnimatePresence, motion, useReducedMotion } from 'motion/react';
type NotificationItem = { id: string; title: string };
export function NotificationList({
items,
onDismiss
}: {
items: NotificationItem[];
onDismiss: (id: string) => void;
}) {
const reduceMotion = useReducedMotion();
return (
<ul className='relative flex w-80 flex-col gap-2'>
{/* popLayout lets the others glide into the gap while an item exits. */}
<AnimatePresence initial={false} mode='popLayout'>
{items.map((item) => (
<motion.li
key={item.id}
layout={!reduceMotion}
initial={{ opacity: 0, y: reduceMotion ? 0 : -12 }}
animate={{ opacity: 1, y: 0, transition: { duration: 0.25 } }}
// Exits are faster than entrances: the person has already moved on.
exit={{
opacity: 0,
scale: reduceMotion ? 1 : 0.95,
transition: { duration: 0.15 }
}}
className='flex items-center justify-between gap-3 rounded-xl border bg-background px-4 py-3 text-sm shadow-sm'
>
{item.title}
<button
type='button'
aria-label='Dismiss'
onClick={() => onDismiss(item.id)}
className='rounded-md px-2 text-muted-foreground hover:bg-muted hover:text-foreground'
>
×
</button>
</motion.li>
))}
</AnimatePresence>
</ul>
);
}Animate items in the notification list: new items fade in and slide down 12px over 250ms, removed items fade out and shrink to 0.95 over 150ms, and the remaining items move smoothly into the freed space. Use Motion’s AnimatePresence with layout animations, and use opacity-only fades when prefers-reduced-motion is set.
Paste into Layerwise or any AI coding tool.
Enter and exit animations explained
An enter animation plays when an element appears, such as a new row fading and sliding into a list. An exit animation plays when it leaves, such as a dismissed toast fading out before it is removed. Together they let people track what changed.
Exits are the harder half. Most frameworks remove an element from the page immediately, which leaves nothing to animate. In React, Motion’s AnimatePresence keeps a removed child on the page until its exit animation finishes. In plain CSS, @starting-style covers entrances, and exits work when the element is hidden with display: none and transition-behavior: allow-discrete.
Make exits faster than entrances, around 150 to 200ms against 250 to 300ms, since the person has already moved on. Let the remaining items glide into the gap with a layout animation, and use simple fades when someone prefers reduced motion.
Often confused with
- Layout animation
- A layout animation moves elements that change position or size. Enter and exit animations handle elements being added or removed, and the two often run together.
Related terms
All termsFade in
An entrance animation where an element goes from fully transparent to fully visible, so it appears gently instead of popping in.
Slide in
An entrance animation where an element moves into place from one side, often while fading in, so people see where it came from.
Toast notification
A brief message that slides into a corner of the screen to confirm an action, then disappears on its own after a few seconds.
Interruptible animation
An animation that can change course mid-flight, continuing smoothly from its current position and speed when someone acts again before it ends.
Build it with Layerwise
Describe your app, watch it run in a live preview, and publish it with a database, storage, and sign-in built in.