Mastering Motion Design in UI

ingredient that separates good interfaces from exceptional ones. When done right, animation feels invisible—it just makes the experience feel more natural and intuitive. In this guide, I’ll share the principles I’ve learned after years of crafting motion for digital products.

Why Motion Matters

Animation isn’t decoration—it’s communication. Well-designed motion serves functional purposes that improve usability:

The 12 Principles (Simplified for UI)

Disney’s 12 principles of animation translate beautifully to interface design. Here are the most relevant ones:

• Easing — Never use linear timing. Ease-out for entrances, ease-in for exits
• Anticipation — Prepare users for what's about to happen with subtle cues
• Follow-through — Let elements settle naturally after the main action
• Secondary Action — Support the main action with complementary motion

Timing Guidelines

Getting duration right is crucial. Too fast feels jarring, too slow feels sluggish.

Easing Functions I Use

The right easing curve makes all the difference. Here are my go-to options:

// My favorite easing functions
const easings = {
// Natural spring - great for entrances
spring: 'cubic-bezier(0.34, 1.56, 0.64, 1)',

// Smooth deceleration - perfect for most UI
smooth: 'cubic-bezier(0.4, 0, 0.2, 1)',

// Snappy response - for micro-interactions
snappy: 'cubic-bezier(0.16, 1, 0.3, 1)',

// Gentle ease - for subtle movements
gentle: 'cubic-bezier(0.25, 0.1, 0.25, 1)',
};

Practical Examples

Button Hover States

A great button hover has three layers of motion:

1. Background color transition (150ms ease-out)
2. Scale transform (100ms spring)
3. Shadow elevation (200ms ease-out)

.button {
transition: 
  background-color 150ms ease-out,
  transform 100ms cubic-bezier(0.34, 1.56, 0.64, 1),
  box-shadow 200ms ease-out;
}

.button:hover {
transform: translateY(-2px) scale(1.02);
box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.3);
}

Page Transitions

For page transitions, I recommend using Astro’s View Transitions or Framer Motion:

::view-transition-old(root),
::view-transition-new(root) {
animation-duration: 0.4s;
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

Tools & Resources

Key Takeaways

“Animation is not about making things move. It’s about making things feel alive.”

Motion design is a skill that develops with practice. Start with these principles:

• Always use easing—linear motion feels robotic
• Keep durations under 400ms for most UI elements
• Respect prefers-reduced-motion for accessibility
• Use motion to show causality and spatial relationships
• Less is more—purposeful animation over decorative