Motion

Le motion Sirdata aide a comprendre ce qui change, d’ou vient une surface et si une action a bien ete prise en compte. Il doit rester rapide, discret et fonctionnel pour ne pas ralentir les workflows SaaS.

Les valeurs de cette page sont des placeholders realistes. La collection Figma actuelle ne contient aucun token motion.

TODO(Figma): creer une collection Motion et remplacer les durees et courbes ci-dessous par les valeurs validees.

Principes

• Utiliser le mouvement pour expliquer un changement ou donner un feedback.
• Garder les micro-interactions rapides et previsibles.
• Ne pas animer une propriete uniquement pour rendre l’interface plus spectaculaire.
• Utiliser une meme duree pour des interactions de complexite equivalente.
• Respecter prefers-reduced-motion dans toutes les implementations.

Duration scale

Instant --motion-duration-instant

Duration

0ms

Easing

linear

Changement immediat, etat qui ne doit pas produire de transition.

Survoler la carte pour previsualiser.

Fast --motion-duration-fast

Duration

120ms

Easing

var(--motion-easing-standard)

Hover, focus, pressed, changement de couleur et micro-feedback.

Survoler la carte pour previsualiser.

Base --motion-duration-base

Duration

180ms

Easing

var(--motion-easing-standard)

Dropdown, tooltip, expansion courte et changement de selection.

Survoler la carte pour previsualiser.

Slow --motion-duration-slow

Duration

240ms

Easing

var(--motion-easing-enter)

Modal, panneau lateral, changement de contexte ou surface importante.

Survoler la carte pour previsualiser.

Slower --motion-duration-slower

Duration

320ms

Easing

var(--motion-easing-emphasized)

Transition editoriale ou marketing exceptionnelle, jamais pour un workflow repetitif.

Survoler la carte pour previsualiser.

Easing

Token	Courbe placeholder	Usage
--motion-easing-linear	linear	Progression, rotation continue, indeterminate
--motion-easing-standard	cubic-bezier(0.2, 0, 0, 1)	Transition UI standard
--motion-easing-enter	cubic-bezier(0, 0, 0.2, 1)	Element qui entre ou devient visible
--motion-easing-exit	cubic-bezier(0.4, 0, 1, 1)	Element qui sort ou disparait
--motion-easing-emphasized	cubic-bezier(0.2, 0, 0, 1.2)	Moment ponctuel avec plus de presence

Les courbes enter et exit peuvent etre asymetriques : une surface peut entrer de facon perceptible et sortir plus rapidement afin de rendre la main a l’utilisateur.

Interaction patterns

Hover and focus

Animer uniquement les proprietes utiles : couleur, background, border ou shadow legere. Une transition de 120ms suffit generalement. Le focus clavier doit rester visible meme si les animations sont desactivees.

Dropdown and tooltip

Utiliser une transition courte de 180ms avec opacite et faible translation. Le contenu doit etre disponible sans attendre la fin de l’animation.

Modal and panel

Utiliser 240ms pour l’entree d’une modal ou d’un panneau lateral. Le backdrop et la surface doivent rester synchronises. Le focus doit etre deplace des l’ouverture, pas apres l’animation.

Loading and progress

Utiliser linear pour une rotation continue ou une progression temporelle. Un spinner ne doit pas remplacer un libelle d’etat ou une estimation lorsque l’attente est longue.

Data updates

Ne pas animer chaque cellule ou ligne lors d’un rafraichissement de table. Utiliser un feedback local, un skeleton ou une mise en evidence courte lorsque cela aide reellement a identifier la valeur modifiee.

Component mapping

Composant	Duration	Easing	Proprietes
Button, Link, Toggle	Fast	Standard	Color, background, border
Tooltip	Fast ou Base	Enter / Exit	Opacity, transform
Dropdown, Popover	Base	Enter / Exit	Opacity, transform, shadow
Tabs	Base	Standard	Indicator, color
Modal	Slow	Enter / Exit	Opacity, transform
Sidebar panel	Slow	Standard	Transform
Spinner	Continue	Linear	Transform rotate
Toast	Base ou Slow	Enter / Exit	Opacity, transform

Product vs Marketing

Product : mouvements courts, previsibles et repetables. L’utilisateur doit pouvoir enchainer les actions sans attendre une animation.

Marketing : davantage de rythme est possible pour les transitions editoriales, logos animes ou reveals, mais les animations doivent rester liees au contenu et respecter le reduced motion.

Audience, ABConsent et ServerSide utilisent la meme echelle motion. Une couleur produit ne justifie pas une vitesse ou une courbe differente.

Tokens CSS

:root {
  /* TODO(Figma): placeholders a remplacer par la future collection Motion. */
  --motion-duration-instant: 0ms;
  --motion-duration-fast: 120ms;
  --motion-duration-base: 180ms;
  --motion-duration-slow: 240ms;
  --motion-duration-slower: 320ms;

  --motion-easing-linear: linear;
  --motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --motion-easing-enter: cubic-bezier(0, 0, 0.2, 1);
  --motion-easing-exit: cubic-bezier(0.4, 0, 1, 1);
  --motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1.2);
}

.button {
  transition:
    background-color var(--motion-duration-fast) var(--motion-easing-standard),
    border-color var(--motion-duration-fast) var(--motion-easing-standard),
    color var(--motion-duration-fast) var(--motion-easing-standard);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

Do / Don’t

Do	Don’t
Utiliser le mouvement pour expliquer un changement.	Ajouter une animation sans role fonctionnel.
Garder les interactions frequentes sous 200ms.	Faire attendre l’utilisateur apres chaque action.
Utiliser transform et opacity pour les transitions de surface.	Animer width, height ou position sur de grandes zones sans necessite.
Garder une echelle commune entre les composants.	Creer une duree locale differente pour chaque page.
Respecter prefers-reduced-motion.	Rendre une animation indispensable pour comprendre l’etat.

Accessibilite

Reduced motion : toutes les animations non essentielles doivent etre supprimees ou simplifiees lorsque prefers-reduced-motion: reduce est actif.

Vestibulaire : eviter les grands mouvements de camera, zooms, parallaxes et translations couvrant tout l’ecran. Preferer un fondu ou un changement instantane.

Clavier et focus : le focus doit suivre l’etat du composant immediatement. Ne jamais attendre la fin d’une animation pour rendre un controle accessible.

Information : une animation ne doit pas etre le seul moyen de signaler une erreur, un succes ou une mise a jour. Ajouter texte, icone ou changement d’etat persistant.

Performance : privilegier transform et opacity. Limiter les animations simultanees dans les tables, dashboards et interfaces operationnelles denses.