Animation

Motion Principles

Purposeful

Every animation serves a purpose - guiding attention, providing feedback, or creating delight.

Natural

Movements follow organic rhythms. Spring physics, overshoot, and gentle settling.

Respectful

Never block the user. Animations are short enough to feel responsive, never tedious.

Easing Functions

Hover over each box to see the easing in action.

ease-out

Quick start, smooth end

ease-spring

Bouncy overshoot

ease-gentle

Subtle, graceful

/* Easing functions */
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);      /* Quick exit, smooth land */
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* Bounce and overshoot */
--ease-gentle: cubic-bezier(0.4, 0, 0.2, 1);    /* Subtle, graceful */

Durations

duration-fast

100ms - Micro-interactions, hovers

duration-normal

200ms - Standard transitions

duration-slow

300ms - Page transitions, modals

duration-slower

500ms - Celebration, emphasis

--duration-fast: 100ms;   /* Micro-interactions */
--duration-normal: 200ms; /* Standard transitions */
--duration-slow: 300ms;   /* Page transitions */
--duration-slower: 500ms; /* Celebration moments */

Common Patterns

Hover Lift

Cards and buttons lift slightly on hover to indicate interactivity.

Hover me

.card {
  transition: transform var(--duration-normal) var(--ease-out),
              box-shadow var(--duration-normal) var(--ease-out);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

Button States

Buttons have distinct hover and active states.

.button {
  transition: all var(--duration-fast) var(--ease-gentle);
}

.button:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.button:active {
  transform: translateY(0);
}

Pixar Principles

We apply the 12 Principles of Animation to create motion that feels alive.

Anticipation - A brief pause before action telegraphs intent
Follow-through - Elements settle after moving, like a spring
Ease in/out - Natural acceleration and deceleration
Secondary action - Subtle supporting animations enhance the main action
Timing - Speed conveys weight and character

Theme Comparison