Cursor
FigmaANIMATIONS GSAP AVEC
Prérequis
- GSAP installé dans le projet (`gsap`, éventuellement `@gsap/react`)
- Hook `useGSAP` ou pattern `gsap.context()` pour le cleanup
- Maquette Figma indiquant animations essentielles vs décoratives
- Accès aux réglages « Réduire les animations » Windows / macOS pour test
Les animations renforcent la hiérarchie visuelle, mais un parallax agressif ou une boucle infinie peut provoquer inconfort ou vertiges — et faire échouer la recette accessibilité. La requête média `prefers-reduced-motion` impose un parcours alternatif. Vous allez aligner les choix Figma et l’implémentation GSAP avec `matchMedia`, cleanup au démontage et tests OS réels.
Cadrer le motion design côté Figma
Classez chaque animation : essentielle (feedback clic, révélation contenu) ou décorative (parallax, flottement). Seules les essentielles méritent un fallback actif — les décoratives sont désactivées en reduced-motion.
Prototypage Figma : fournissez une frame « reduced » ou une annotation sur le composant hero. Le développeur n’invente pas un état alternatif en sprint.
Coordonnez avec figma-audit-contraste-accessibilite : une animation ne doit pas masquer un problème de focus ou de lisibilité.
Implémenter gsap.matchMedia en React
Dans un Client Component, `useGSAP(() => { const mm = gsap.matchMedia(); mm.add('(prefers-reduced-motion: reduce)', () => { /* tweens courts ou disable */ }); mm.add('(prefers-reduced-motion: no-preference)', () => { /* ScrollTrigger, parallax */ }); return () => mm.revert(); }, { scope: containerRef });`
Évitez les ScrollTrigger créés hors matchMedia : ils persistent après changement de préférence OS si l’utilisateur bascule sans recharger (cas rare mais réel sur certains navigateurs).
Préférez `transform` et `opacity` — pas d’animation de `height` ou `top` qui provoque du reflow. Voir les bonnes pratiques perf GSAP du projet.
Tester et valider en recette
Activez « Réduire les animations » dans les paramètres système, rechargez la page : le hero ne doit plus pin/scrub. Désactivez — l’expérience riche revient sans erreur console.
Testez clavier : le focus reste visible pendant et après l’animation. Pas de `pointer-events: none` oublié sur les CTA.
Documentez dans la checklist recette Notion (notion-checklist-recette-mise-en-prod) : case « reduced-motion validé sur homepage + section animée ».
Erreurs fréquentes
Vérifier reduced-motion uniquement en CSS global sans toucher GSAP : les tweens JS continuent.
Oublier `mm.revert()` ou `ctx.revert()` au unmount : fuites ScrollTrigger en navigation SPA.
Remplacer par une animation plus longue « pour compenser » — l’utilisateur a demandé moins de mouvement.
ScrollTrigger sur tout le site sans audit : charge CPU et accessibilité dégradée.
Ce qu’il faut retenir
matchMedia GSAP obligatoire dès qu’un ScrollTrigger ou parallax est présent.
Design distingue essentiel vs décoratif ; fallback documenté.
Cleanup useGSAP / context au démontage.
Test OS reduced-motion avant mise en prod.
FAQ
Non. Réduisez durée et amplitude, ou remplacez par un fondu court. Le contenu et les actions restent disponibles.
Exposez le risque accessibilité. Gardez le parallax sous `no-preference` uniquement ; jamais en override forced.
Pour du CSS pur, oui. Dès que GSAP pilote le mouvement, la logique doit vivre dans matchMedia — le CSS seul ne stoppe pas les tweens JS.
