When Animations Hurt UX

The journey began while I was developing an interactive dashboard for my portfolio. Every button, card, and modal featured smooth animations. Hover effects, slide-ins, fade-outs—everything was in motion.

Initially, it felt polished. However, as I tested it with friends and colleagues, a subtle yet frustrating issue emerged: users were getting distracted and missing key interactions. A perfectly designed 3D skill orbit, for instance, was overlooked because their attention was drawn to a constantly bouncing card.

This was my first lesson: animations are powerful—but only when used purposefully.

The Problem: Excessive Motion

My dashboard was technically impressive. I utilized Framer Motion for fluid transitions, animated entire card grids, and even experimented with 3D components using React Three Fiber.

However, I realized that the more I animated, the less clear the interface became. Subtle micro-interactions lost their significance when everything was in motion.

I had to consider:

Which animations actually guide the user?
Which are merely decorative?
Are any causing performance issues on mid-range devices?

Experimenting with Timing and Easing

To find the right balance, I began testing micro-interactions with different timing:

• 150–300ms for buttons and small cards

• 300–500ms for page-level transitions

Easing was carefully chosen: ease-out for entrances, ease-in for exits.

I created a small test harness in React to compare variations side by side:

<motion.div
  initial={{ opacity: 0, y: 20 }}
  animate={{ opacity: 1, y: 0 }}
  exit={{ opacity: 0, scale: 0.95 }}
  transition={{ duration: 0.25, ease: "circOut" }}
>
  <Card content={project} />
</motion.div>

The difference in user perception was subtle but significant. Clear, quick feedback made interactions feel responsive without being overwhelming.

Performance Considerations

Animating multiple components, especially 3D nodes, quickly led to frame drops on lower-end devices.

Here’s how I addressed it:

• Animate transform and opacity only, avoiding layout reflows.

• Use React.lazy + Suspense for heavy components (like the 3D orbit).

• Dynamically reduce complexity based on device capabilities:

const SkillOrbit = React.lazy(() => import("../3d/SkillOrbit"));

return (
  <Suspense fallback={<Preloader />}>
    <SkillOrbit />
  </Suspense>
);

The result? Smooth motion without sacrificing interactivity or detail.

Accessibility: Respecting Reduced Motion

Some users prefer reduced motion to prevent strain or discomfort. Ignoring this would have made the dashboard inaccessible.

const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;

<motion.div
  animate={prefersReducedMotion ? {} : { opacity: 1, y: 0 }}
  initial={{ opacity: 0, y: 20 }}
/>

Now the dashboard adapts automatically—motion enhances UX but never becomes a barrier.

Lessons Learned

• Purpose first: Every animation must serve feedback, guidance, or state indication.

• Micro-interactions matter: Timing, easing, and subtlety can elevate UX.

• Performance is a design decision: Smooth motion is as much about engineering as design.

• Accessibility is non-negotiable: Motion should be adjustable for every user.

Takeaway:

Good animation tells a story; bad animation tells a lie. Thoughtful motion can guide, delight, and communicate state. Poorly considered motion can distract, frustrate, or even make an interface feel slow.

This experience didn’t just improve my dashboard—it reshaped how I approach interactive frontend systems, balancing polish with clarity, complexity with performance, and beauty with usability.

Next up:
In my next post, Experiments #01 — 3D Skill Orbit Prototype, I’ll share how I applied these principles to build an immersive, interactive 3D skills visualization, and what I learned about balancing performance with interactivity.