WebflowANIMATIONS ET REDUCED-MOTION
Prérequis
- Interactions IX2 ou Lottie identifiés sur le projet
- Accès custom code Head/Footer si fallback CSS requis
- Réglages OS « Réduire les animations » pour test
- Checklist recette accessibilité partagée
Les interactions IX2 et Lottie enrichissent l’expérience, mais un scroll agressif peut provoquer inconfort et faire échouer la recette accessibilité. Sans fallback, vous excluez les utilisateurs qui activent « Réduire les animations » au niveau OS. Vous allez classer les animations, prévoir des alternatives reduced-motion et documenter les tests.
Classifier les animations du projet
Inventoriez trigger, durée, boucle et amplitude. Classez en essentielle ou décorative — seules les essentielles gardent un mouvement réduit ≤ 300 ms.
Coordonnez avec figma-audit-contraste-accessibilite : une animation ne doit pas masquer un défaut de focus sur les CTA.
IX2, Lottie et custom code
IX2 ne lit pas `prefers-reduced-motion` automatiquement. Dupliquez l’élément avec variante statique via custom CSS, ou réduisez durée et déplacement.
Injectez en Footer `@media (prefers-reduced-motion: reduce)` forçant `animation: none` sur les classes ciblées.
Tester et documenter en recette
Activez « Réduire les animations » dans les paramètres système, rechargez le site publié. Testez clavier : focus visible pendant et après transition.
Ajoutez une ligne dans notion-checklist-recette-mise-en-prod : reduced-motion validé homepage + section IX2.
Erreurs fréquentes
Compter sur WCAG « par défaut » sans audit IX2.
Scroll jank : interactions While scrolling sur toute la page.
Vidéo background autoplay sans alternative statique.
Oublier les embeds tiers hors Webflow IX2.
Ce qu’il faut retenir
Inventaire + classification essentiel/décoratif avant production.
Fallback CSS ou variante statique pour IX2 décoratif.
Tests OS reduced-motion sur URL publiée.
FAQ
Non. Réduisez durée et amplitude, ou remplacez par un fondu court. Le contenu reste disponible.
Pas entièrement pour IX2. Comptez sur custom CSS ou export code avec matchMedia si migration vers stack custom.
Exposez le risque accessibilité. Gardez le parallax uniquement hors reduced-motion — ne forcez jamais les préférences système.
Cursor