Motion

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

Principes

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

Transition Tokens

Token	Waarde	Gebruik
`--transition-fast`	`150ms ease`	Hover states, focus rings, opacity
`--transition-base`	`250ms ease`	Layout 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

Motion

Animatie principes en CSS transition tokens

Motion

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

Principes

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

Transition Tokens

Token	Waarde	Gebruik
`--transition-fast`	`150ms ease`	Hover states, focus rings, opacity
`--transition-base`	`250ms ease`	Layout 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

Motion

Motion

Principes

Transition Tokens

CSS Gebruik

Tailwind Gebruik

Reduced Motion

SVG Animaties

On this page

Motion

Motion

Principes

Transition Tokens

CSS Gebruik

Tailwind Gebruik

Reduced Motion

SVG Animaties

On this page