Easing curves, scroll timelines, and reduced-motion habits that make an interface feel quick instead of busy.
Every team has shipped one PR like this. Someone adds a modal, it fades in over 700ms with a small bounce, and it looks great on the reviewer's laptop. Three weeks later a ticket says the app feels sluggish. Nothing got slower. The motion just told people to wait.
That gap between an animation that looks good on its own and one that works inside a product is the real work of motion design. It depends less on knowing every easing function than on getting a handful of decisions right. Here are nine I keep coming back to.
What Is Motion Design in a Frontend Context?
Motion design is the use of timing, easing, and spatial change to communicate state. On the web that covers transitions, micro-interactions, page changes, and scroll behavior. It is not decoration. Every animation answers a question the user is about to ask: what just happened, and is the app still working?
Motion graphics is the neighboring craft, usually rendered video or After Effects work. Motion in a UI has to react to input, survive a slow network, and hold 60fps on a mid-range Android.
Which Motion Design Techniques Improve UX?
1. Set duration by distance, not by feel
A tooltip that shifts 8px does not need the timing of a full-screen sheet. Short distances land around 100 to 200ms. Panels and drawers sit near 250 to 400ms. Past 500ms in a productivity UI, motion reads as lag.
2. Split your easing between enter and exit
Things arriving should decelerate. Things leaving should accelerate away. Symmetric easing is the quickest route to a mushy interface.
.panel {
transition: translate 240ms cubic-bezier(0.16, 1, 0.3, 1);
}
.panel[data-closing] {
transition: translate 160ms cubic-bezier(0.7, 0, 0.84, 0);
}
Exits also run shorter. Nobody wants to watch something leave.
3. Animate transform and opacity, and very little else
Those two run on the compositor. Width, height, top, and margin push layout work onto every frame. If a card needs to grow, animate scale and counter-scale the contents, or use FLIP.
4. Let CSS own entry and exit states
@starting-style retired the double requestAnimationFrame trick. Paired with allow-discrete, elements animate in and out of display: none with no JavaScript.
.toast {
opacity: 1;
transition: opacity 200ms ease, display 200ms allow-discrete;
}
.toast[hidden] { opacity: 0; display: none; }
@starting-style { .toast { opacity: 0; } }
5. Move scroll effects off the main thread
Scroll listeners and IntersectionObserver class toggles are still everywhere, and most of them can go. Native scroll timelines bind an animation to scroll position on the compositor instead.
.reveal {
animation: rise linear both;
animation-timeline: view();
animation-range: entry 0% entry 40%;
}
@keyframes rise {
from { opacity: 0; translate: 0 24px; }
to { opacity: 1; translate: 0 0; }
}
Support is broad but not universal, so wrap it in @supports and let other browsers render the finished state.
6. Use view transitions to keep continuity
When a list row becomes a detail view, people lose the thread if the screen just swaps. Give both elements the same view-transition-name and the browser animates between them.
document.startViewTransition?.(() => renderDetail(id));
Same-document transitions are safe to ship now. Cross-document ones still belong behind a feature check.
7. Stagger sequences instead of stacking them
Five elements animating at once reads as noise. The same five at 40 to 60ms offsets reads as a sequence. GSAP does this in one line, and every plugin has been free since version 3.13.
gsap.from(".card", { y: 16, opacity: 0, duration: 0.4, stagger: 0.05 });
8. Treat reduced motion as a design state
prefers-reduced-motion is not a switch that deletes animation. Swap movement for a fade, keep the feedback, keep the timing legible.
@media (prefers-reduced-motion: reduce) {
.panel { transition-property: opacity; }
.reveal { animation-timeline: none; opacity: 1; }
}
9. Give motion a budget
Bundle size gets a budget. Motion rarely does. Agree on a small set of durations and easing curves as tokens, then ask for a reason before anything lands outside that set.
How Can Developers Learn Motion Design Faster?
Copy less, measure more. Three habits speed this up:
•Record real interactions and play them back at quarter speed. Slow playback exposes bad timing instantly.
•Profile with a 4x CPU throttle in DevTools rather than on your own machine.
•Build a small internal motion page holding your tokens and every component state. Reviewers stop arguing from memory.
That habit is not unique to product teams. Studios building 3D and WebGL brand sites treat motion design as a storyboarding step, because reworking a scroll sequence after the scene exists costs far more than sketching it first.
Common Mistakes
•Animating height or top, then blaming the framework for dropped frames.
•Leaving will-change on permanently, which holds layers in memory for nothing.
•Long entry animations on text people came to read. Copy should arrive, not perform.
•Motion with no cancel path, so fast users end up fighting the interface.
Key Takeaways
•Duration follows distance, and exits run shorter than entries.
•Stay on transform and opacity unless profiling says otherwise.
•CSS now handles entry, exit, scroll, and page transitions natively.
•Reduced motion is a design state, not a fallback.
•Tokens keep motion consistent once more than one person is committing.
Wrapping Up
Good motion design is mostly restraint plus a few defaults you stop relitigating. Pick your durations, split your easing, keep animations on the compositor, and let the platform carry the rest. Apply that to one screen and the difference shows before you finish the PR description.
FAQs
Is motion design the same as motion graphics?
No. Motion graphics usually means rendered output such as video. Motion design in a UI responds to input and runs in real time.
How long should a UI animation last?
Most land between 150 and 400ms. Small elements move faster, large surfaces move slower, and exits stay shorter than entries.
Do I still need GSAP now that CSS handles scroll animation?
For reveals and parallax, CSS covers it. For pinned sections, scrubbed timelines, and complex sequencing, GSAP still does things CSS cannot.
How do I test motion design for accessibility?
Turn on reduced motion in your OS settings and complete a full task in the app. Anything that becomes confusing needs a fade or an instant state.
Where should motion live in a design system?
In tokens, next to color and spacing, alongside the rest of your reusable values.
Top comments (0)