Purposeful animation
Also called functional animation or meaningful motion
Animation used only where it helps people notice a change, follow where something went, or understand what just happened.
import { AnimatePresence, motion, useReducedMotion } from 'motion/react';
type Notification = { id: string; text: string; time: string };
// Everything at rest stays still. The one row that just arrived slides in
// and holds a blue tint for a second, so the eye goes straight to it.
export function NotificationList({ items }: { items: Notification[] }) {
const reduceMotion = useReducedMotion();
return (
<ul className='flex w-80 flex-col divide-y rounded-2xl border bg-background'>
{/* initial={false}: rows already on screen don't animate on load. */}
<AnimatePresence initial={false}>
{items.map((item) => (
<motion.li
key={item.id}
initial={{
opacity: 0,
y: reduceMotion ? 0 : -12,
backgroundColor: 'rgba(59, 130, 246, 0.12)'
}}
animate={{
opacity: 1,
y: 0,
backgroundColor: 'rgba(59, 130, 246, 0)'
}}
transition={{
duration: 0.3,
ease: 'easeOut',
backgroundColor: { delay: 1, duration: 0.4 }
}}
className='flex justify-between gap-4 px-4 py-3 text-sm'
>
<span>{item.text}</span>
<span className='shrink-0 text-muted-foreground'>{item.time}</span>
</motion.li>
))}
</AnimatePresence>
</ul>
);
}Review the animations in this app and keep only the ones that explain something. Remove looping bounces and floats from icons and cards. When a new notification arrives, slide only that row in from 12px above over 300ms with an ease-out curve and tint its background blue for 1 second, and show it without movement when prefers-reduced-motion is set.
Paste into Layerwise or any AI coding tool.
What is Purposeful animation?
Purposeful animation means every moving part has a job. Motion is good at a few things: pointing out what just changed, showing where an item came from or went, confirming that a tap worked, and making a wait feel shorter. When an animation does one of those jobs, the interface becomes easier to understand.
Motion is also the strongest attention signal on a screen. If icons bounce, cards float, and badges pulse all the time, nothing stands out, and the one change that matters gets lost. Keep the resting state calm and save motion for the moments that need it.
A quick test before adding an animation: can you say what it tells the user? If the honest answer is "it looks cool," make it short, play it once, or keep it for a marketing page. Either way, respect prefers-reduced-motion.
Often confused with
- Micro-interaction
- A micro-interaction is one small feedback moment, like a toggle or a like button. Purposeful animation is the rule for deciding whether any animation should exist at all.
Related terms
All termsFrequency of use
The rule that the more often people see an animation, the shorter and subtler it should be, so everyday actions never feel slow.
Spatial consistency
Moving elements in ways that match where things live in the interface, so people can tell where an item went and how to find it again.
Reduced motion
An operating system setting that asks apps to minimize movement, which websites detect with the prefers-reduced-motion media query.
Micro-interaction
A small moment of feedback around a single action, like a heart that bursts when tapped or a copy icon that turns into a checkmark.
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.