The right animation at the right moment reduces cognitive load and guides users toward action. Here's the framework we use.
There's a version of motion design that exists to impress. Elaborate entrance animations, parallax effects on every section, elements that spin and bounce and float. It looks great in a Dribbble shot. It tends to hurt conversion.
Then there's the version of motion design that works — the kind that users don't consciously notice, but that makes an interface feel effortless, trustworthy, and clear. This is the version we obsess over at Vekto Studio, and it's driven by a simple principle: animation should reduce cognitive load, not add to it.
Before any animation gets written, we ask one question: what decision or action are we trying to support here?
Motion that doesn't answer that question gets cut. Not because we're minimalists, but because decoration competes with signal. Every animation draws attention. Attention is finite. If your page has twelve animated elements, none of them are guiding the user — they're fighting each other.
The framework has three tiers:
Tier 1 — Orientation: Animations that tell users where they are and what changed. Page transitions, state changes, error states. These should be fast (150–250ms) and subtle. The goal is clarity, not drama.
Tier 2 — Hierarchy: Animations that communicate what matters most. Staggered content reveals, emphasis on primary CTAs, progressive disclosure. These can be slightly more expressive (300–500ms) but should feel inevitable, not performative.
Tier 3 — Delight: Animations that reward attention and create brand personality. These live in hover states, empty states, success moments. They're the last layer added, never the first.
The mistake most teams make is designing Tier 3 first.
When we worked on the brand and motion language for Novu — a delivery app — the initial direction leaned heavily into kinetic energy. Fast moves, elastic easing, constant motion. It felt alive.
User testing told a different story. The constant motion was increasing cognitive load on the checkout flow, which is precisely where you want users calm and confident, not stimulated. The animations were signaling speed when users needed to feel in control.
We pulled back. Slower easing curves on transactional elements. Motion reserved for feedback — confirming an action, showing progress, indicating success. The energetic animations stayed, but only in onboarding and marketing contexts where excitement was the right emotional register.
Conversion on the checkout flow improved. The lesson: emotion and context have to match. Motion that's right for a brand reveal is wrong for a payment confirmation.
After using Motion (formerly Framer Motion) across projects like Orbit, Madera, and Pulse, a few patterns have proven reliable:
Staggered list reveals — When content appears in sequence with a 60–80ms delay between items, users perceive the list as scannable before they've read a word. It's the animation equivalent of visual hierarchy.
Easing that matches the element's weight — Lightweight UI elements (tooltips, badges, chips) should use snappy easing. Heavy containers (modals, drawers, full panels) should ease in with more mass. The physics should feel honest.
Exit animations shorter than entrances — Exits should be 40–60% the duration of entrances. Users are waiting for what comes next. Don't make them watch the old thing leave.
Micro-feedback on every interactive element — A button that gives no feedback on hover creates subtle uncertainty. A 20ms scale shift and a slight color change confirms: this is clickable, and you're about to do something. It sounds trivial. It compounds across an entire interface.
We use Motion with React on almost every project, paired with Tailwind for static states. Our approach:
// Staggered reveal — a pattern we use on almost every content section
const container = {
hidden: { opacity: 0 },
show: {
opacity: 1,
transition: { staggerChildren: 0.07 }
}
};
const item = {
hidden: { opacity: 0, y: 16 },
show: { opacity: 1, y: 0, transition: { duration: 0.4, ease: [0.16, 1, 0.3, 1] } }
};
The easing curve [0.16, 1, 0.3, 1] is one we return to constantly — it's a custom ease-out that feels natural without being generic. James Okafor, our UI/UX Designer, calls it the "confident settle."
One non-negotiable in every project: prefers-reduced-motion. Any animation that moves content spatially must be suppressed or substituted for users who've requested reduced motion. This isn't just an accessibility requirement — it's a signal that your team understands that motion serves users, not the other way around.
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
The best motion design disappears. Not because it's invisible, but because it's so well-matched to context that users experience it as the interface simply working correctly. That's the target. Not the Dribbble shot — the moment a user reaches the end of a checkout flow feeling calm, confident, and unhesitant.
That feeling is motion doing its job.
Turn what you just read into action. Tell us about your project.
Start a project