F4Shipped

Motion

Animation tokens, transition guidelines, and motion principles. Animations should orient the user — not decorate the interface.

Current Tokens

animate-fade-in

fadeIn 0.2s ease-in-out

Content entry: panels, tooltips, notifications.

animate-slide-up

slideUp 0.3s ease-out

Modal / drawer entry from below.

tokens.css keyframes

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes slideUp {
  from { transform: translateY(10px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

When to Animate

Use animate-fade-in for:

Tooltip entry
Panel / tab content reveal
Notification / toast appearance

Use animate-slide-up for:

Dialog / modal entry
Drawer / sidepanel reveal
Bottom sheet patterns

Do NOT animate:

Hover state transitions (use transition-colors)
Button press / switch toggle
Looping or decorative effects
Spinners (use Tailwind animate-spin)

Transition Guidelines

/* Interactive controls */
transition-colors   /* color + bg changes on hover/focus */
transition-opacity  /* fade on state change */

/* Duration */
0.15s   /* controls (button hover, link) */
0.2s    /* content entry (tooltip, dropdown) */
0.3s    /* panel/modal entry */

/* Easing */
ease-out     /* entry animations — starts fast, slows at end */
ease-in-out  /* toggles and reversible states */

Upcoming Token Additions

Phase 3

--duration-fast:   150ms;
--duration-base:   200ms;
--duration-slow:   300ms;

--ease-out:    cubic-bezier(0, 0, 0.2, 1);
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

/* prefers-reduced-motion support */
@media (prefers-reduced-motion: reduce) {
  .animate-fade-in,
  .animate-slide-up { animation: none; }
}