How I Learned to Stop Worrying and Love UI Animation

April 2026

Seven practical ideas that changed how I design motion in interfaces.

Early in my career I believed animation was a talent you either had or you didn't. Polished interfaces felt like sorcery.

That was nonsense. Good animation is deliberate, explainable, and reproducible. Below are seven practical ideas I use when designing motion. Each idea is small, but together they change how an interface feels.

Start from Scale(0.93), Not Zero

Animating from scale(0) breaks physical intuition — things don't materialize from nothing. Start slightly above zero (0.93+) so elements feel like they unfold.

css

.dropdown {
  transform: scale(0.93);
  opacity: 0;
  transition:
    transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.2s ease-out;
}

.dropdown.open {
  transform: scale(1);
  opacity: 1;
}

Scale 0.93 → 1 creates natural unfold motion

Elements emerge from a slightly smaller state, mimicking real-world physics.

Toggles using a 0.93 -> 1 scale make transitions feel natural.

Give Buttons a Pulse

Tiny, immediate feedback turns a dead click into a conversation. A quick scale-down on :active is the simplest and most effective pattern.

css

.button:active {
  transform: scale(0.97);
  transition: transform 0.1s ease-out;
}

What's happening:

The button scales to 0.97 on press — instant feedback that turns a dead click into a conversation.

Buttons should answer back — even subtly.

Easing Is the Whole Game

Duration sets the tempo, easing gives it character. For entry/exit, prefer ease-out or a custom cubic that gives energy. Compare ease-in (feels slow) with a punchy cubic curve.

css

.dropdown-wrong {
  transition: transform 0.3s ease-in;
}
.dropdown-right {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

ease-in(feels sluggish)

cubic-bezier(0.16, 1, 0.3, 1)(responsive)

Notice the red box with ease-in vs the primary box with a custom curve. The easing function determines whether motion feels sluggish or energetic.

Compare easing choices — the right curve changes perceived speed.

Popovers Should Know Where They Came From

Set transform-origin to the trigger so popovers grow from their source. This small detail aligns motion with spatial intent and reads correctly to the eye.

css

.popover {
  transform-origin: var(--radix-dropdown-menu-content-transform-origin);
}

transform-origin matters:

This menu grows from the button it came from. Without transform-origin, popovers expand from the center—which looks wrong.

A popover that grows from its trigger feels grounded.

Tooltips Should Remember You Are Hovering

Delay on first appearance prevents accidental triggers; once a tooltip is open, subsequent hovers should be instant.

css

.tooltip[data-instant] {
  transition-duration: 0ms;
}

Hover over the buttons in sequence:

Instant tooltips on hover (no delay)

Context awareness:

Once a tooltip appears, subsequent hovers should skip the delay. This makes rapid interactions feel instant, not sluggish.

Tooltips that adapt to context feel smarter.

Blur Fixes What Other Properties Cannot

When transitions feel stiff, a subtle blur during the state change can create perceived continuity. Use sparingly.

css

.button-transition {
  transition:
    transform 0.2s ease-out,
    opacity 0.2s ease-out,
    filter 0.2s ease-out;
}
.button-transition.changing {
  filter: blur(2px);
}

Initial

State transition #0

When nothing else works:

Blur bridges visual gaps during state changes. It tricks the brain into perceiving smooth motion instead of two states swapping. Use sparingly.

A delicate blur can bridge visual gaps between states.

What This All Means

Animation is not decoration. It is a form of feedback and spatial reasoning. These patterns — start from non-zero scale, pick expressive easings, make UI answer back — are small, repeatable choices that compound into a design that feels alive.

Start noticing how interfaces move, not only where they end up.