Framer Motion — transitions, animations de défilement, animations de mise en page.
Qu'est-ce que compétences ?
Cette compétence fournit des directives complètes pour utiliser Framer Motion avec React afin de créer des animations interactives et performantes. Elle couvre les animations de base avec `motion.div`, la gestion des montages/démontages via `AnimatePresence`, et l'animation automatique des mises en page avec la propriété `layout`. Pour les effets de défilement, elle exploite les hooks `useScroll()` et `useTransform()` pour des parallaxes et révélations déclenchées par le défilement, tout en respectant les préférences de réduction de mouvement avec `useReducedMotion()`. La compétence insiste sur l'optimisation des performances en animant uniquement `transform` et `opacity`, en évitant les propriétés coûteuses comme `width` ou `height`, et en limitant les durées d'animation à 200‑800 ms selon le contexte. Elle s'adresse aux développeurs utilisant React et Framer Motion sur toute plateforme supportant ces bibliothèques, avec un accent sur l'accessibilité et l'expérience utilisateur fluide.