Roosevelt Docs
Design System

Motion

Animatie principes en CSS transition tokens

Motion

Animaties in Roosevelt OPS zijn subtiel en purposeful — ze verduidelijken interacties, nooit decoratief.

Principes

  1. Functioneel — Animaties communiceren state changes (hover, focus, open/close)
  2. Snel — Gebruikers wachten niet op animaties; micro-interacties < 200ms
  3. Subtiel — Geen bounce, spring of overshoot tenzij het UX verduidelijkt
  4. Respectvol — Respecteer prefers-reduced-motion

Transition Tokens

TokenWaardeGebruik
--transition-fast150ms easeHover states, focus rings, opacity
--transition-base250ms easeLayout shifts, modals, drawers

CSS Gebruik

/* Hover state op een button */
.btn {
  transition: background-color var(--transition-fast),
              box-shadow var(--transition-fast);
}
 
/* Modal open/close */
.modal {
  transition: opacity var(--transition-base),
              transform var(--transition-base);
}

Tailwind Gebruik

<button class="transition-colors duration-150 ease-in-out hover:bg-brand">
  Action
</button>
 
<div class="transition-all duration-250 ease-in-out">
  Content
</div>

Reduced Motion

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}
✦

Intersection Observer

Voor scroll-triggered animaties, gebruik Intersection Observer met een threshold van 0.1. Voeg een .is-visible class toe en animeer via CSS transitions — geen JavaScript animation libraries.

SVG Animaties

  • Gebruik CSS transitions, geen SMIL
  • stroke-dashoffset voor line drawing effects
  • Maximale duur: 800ms
  • Altijd prefers-reduced-motion respecteren

Previous

Spacing

Next

Components

On this page