Composants Motion et animations de base
Remplacez div par motion.div et utilisez les propriétés animate, initial et exit pour créer des animations simples.
Composants Motion et animations de base est une leçon React Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage React Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours React Academy comprend 4 leçons au total.
Qu’est-ce que Framer Motion ?
Framer Motion est une bibliothèque d’animations pour React. Remplacez les éléments HTML par leurs équivalents motion.* pour ajouter des animations déclaratives via des propriétés plutôt que des images clés CSS.
Installation
Installez Framer Motion et importez motion depuis cette bibliothèque.
npm install framer-motion
import { motion } from 'framer-motion';Votre première animation
Remplacez <div> par <motion.div> et ajoutez les propriétés initial, animate et transition.
<motion.div
initial={{ opacity: 0, y: -20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.4 }}
>
Hello, Framer Motion!
</motion.div>La propriété initiale
initial définit l’état de départ de l’animation — l’état dans lequel l’élément se trouve avant d’être animé vers animate.
// Fade in from left
<motion.div
initial={{ opacity: 0, x: -50 }}
animate={{ opacity: 1, x: 0 }}
/>
// Scale up from center
<motion.button
initial={{ scale: 0 }}
animate={{ scale: 1 }}
/>La propriété d’animation
animate définit l’état cible. Framer Motion interpole entre initial et animate à l’aide de la physique des ressorts ou d’une fonction d’accélération spécifiée.
<motion.h1
initial={{ opacity: 0 }}
animate={{ opacity: 1, color: '#4f46e5' }}
transition={{ duration: 0.6, ease: 'easeOut' }}
>
Welcome
</motion.h1>Options de transition
La propriété transition contrôle le déroulement de l’animation : duration, ease, delay, type (« ressort » | « interpolation » | « inertie »).
transition={{
type: 'spring',
stiffness: 300,
damping: 20,
delay: 0.2,
}}Images clés dans l’animation
Transmettez un tableau à n’importe quelle valeur animée pour créer des animations par images clés qui passent par plusieurs états.
<motion.div
animate={{ x: [0, 30, 0] }}
transition={{ duration: 1, repeat: Infinity, ease: 'easeInOut' }}
/>États de survol et d’appui
whileHover et whileTap définissent des états animés pour les interactions de survol et d’appui, puis reviennent automatiquement à leur état précédent lorsque le geste se termine.
<motion.button
whileHover={{ scale: 1.05, backgroundColor: '#4f46e5' }}
whileTap={{ scale: 0.95 }}
style={{ backgroundColor: '#6366f1' }}
>
Press me
</motion.button>Animer au défilement avec inView
Utilisez la propriété whileInView pour déclencher une animation lorsque l’élément entre dans la fenêtre d’affichage lors du défilement.
<motion.section
initial={{ opacity: 0, y: 40 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true, amount: 0.3 }}
transition={{ duration: 0.5 }}
>
<h2>Revealed on scroll</h2>
</motion.section>La propriété de sortie avec AnimatePresence
exit définit l’animation lorsqu’un composant est démonté. Elle ne fonctionne que lorsque le composant est enveloppé dans <AnimatePresence>.
import { motion, AnimatePresence } from 'framer-motion';
<AnimatePresence>
{isVisible && (
<motion.div
key="modal"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0, scale: 0.95 }}
/>
)}
</AnimatePresence>useAnimate pour un contrôle impératif
useAnimate() renvoie une référence scope et une fonction animate pour contrôler les animations par programmation, en dehors du système de propriétés déclaratives.
import { useAnimate } from 'framer-motion';
function ShakeButton() {
const [scope, animate] = useAnimate();
const handleClick = async () => {
await animate(scope.current, { x: [-10, 10, -10, 0] }, { duration: 0.3 });
};
return <motion.button ref={scope} onClick={handleClick}>Shake</motion.button>;
}Réduire les mouvements
Respectez la préférence de l’utilisateur concernant la réduction des mouvements avec le hook useReducedMotion().
import { useReducedMotion } from 'framer-motion';
function AnimatedCard() {
const shouldReduce = useReducedMotion();
return (
<motion.div
animate={{ opacity: 1, y: shouldReduce ? 0 : -20 }}
/>
);
}Vérification rapide
Quelle propriété de Framer Motion définit l’état d’animation qu’un composant doit atteindre, c’est-à-dire sa cible ?
Récapitulatif
Remplacez les éléments HTML par des équivalents motion.*. Utilisez initial pour l’état de départ, animate pour la cible, transition pour le minutage, whileHover/whileTap pour les gestes et whileInView pour les animations déclenchées par le défilement.
Questions Fréquemment Posées
La leçon « Composants Motion et animations de base » est-elle gratuite ?
Oui — le texte complet de « Composants Motion et animations de base » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours React Academy, passe à CoddyKit PRO. Le cours React Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Composants Motion et animations de base » ?
Remplacez div par motion.div et utilisez les propriétés animate, initial et exit pour créer des animations simples. Tu pratiques React Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer React Academy ?
Aucune expérience préalable n'est requise. React Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.
Combien de temps prend la leçon « Composants Motion et animations de base » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon React Academy ?
Oui. Chaque leçon React Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Composants Motion et animations de base
- Variantes pour des animations orchestrées
- Animations par gestes : survol, appui et glissement
- Animations de mise en page et AnimatePresence