Animer un composant React lorsqu’il entre ou sort de l’écran peut être un défi. En effet, lorsque vous cachez un composant, React le retire du DOM, ce qui le rend indisponible pour l’animation. Lorsque vous affichez à nouveau le composant, React le réintègre au DOM, ce qui peut entraîner une apparition brutale sans animation.
Vous pouvez résoudre ce problème avec une bibliothèque d’animation comme Framer Motion.
Qu’est-ce que Framer Motion ?
Framer Motion est une bibliothèque d’animation prête à la production pour React. Elle fournit une gamme de composants, de crochets, d’images clés et de fonctions d’assouplissement personnalisées pour créer et contrôler les animations.
L’un des avantages de Framer Motion est qu’il facilite la création d’animations fluides et douces sans avoir à écrire beaucoup de code JavaScript ou à effectuer des calculs pour chaque transition.
Il dispose également d’un système d’événements que vous pouvez utiliser pour déclencher des animations en fonction des entrées de l’utilisateur, telles que les clics sur les boutons et les gestes, afin de créer des interfaces interactives et dynamiques qui semblent réactives.
Pour démontrer comment utiliser Framer Motion dans React, vous animerez un composant qui entre et sort de l’écran lorsque vous cliquez sur un bouton.
Création d’un projet React
Pour créer un projet React, vous devez installer Node.js et npm (Node Package Manager) sur votre machine si vous ne l’avez pas encore fait.
Une fois ces dépendances installées, vous pouvez créer un nouveau projet React à l’aide de Vite en lançant la commande yarn vite dans votre terminal.
yarn vite
Cette commande créera un nouveau dossier avec tous les fichiers et dépendances nécessaires pré-installés. Naviguez jusqu’au dossier et démarrez le serveur de développement avec la commande yarn start.
yarn start Installation de Framer Motion dans React
Installez Framer Motion en exécutant cette commande :
npm install framer-motion
Cette commande ajoutera Framer Motion comme dépendance à votre projet.
Animer un composant
Pour animer un composant lorsqu’il entre et sort de l’écran dans React à l’aide de Framer Motion, vous devez l’envelopper dans le composant motion.
Le composant motion fournit un ensemble de propriétés permettant d’animer l’entrée et la sortie du composant. Vous pouvez utiliser les propriétés initial, animate et exit pour contrôler sa visibilité et sa position.
Pour le voir en action, ajoutez le code suivant au début du fichier App.jsx pour importer le composant motion de framer-motion.
import { motion } from "framer-motion";
Ensuite, créez le composant que vous souhaitez animer en l’entourant du composant motion. Cet exemple utilise un élément div mais vous pouvez utiliser n’importe quel autre élément comme button, li, et p entre autres.
import { motion, AnimatePresence } from "framer-motion"
function App() {
return (
<>
<AnimatePresence>
<motion.div
initial={{ x: -100, opacity: 0 }}
animate={{ x: 0, opacity: 1 }}
exit={{ x: -100, opacity: 0 }}
>
<p>Sent!</p>
</motion.div>
<AnimatePresence>
</>
)
}
Le composant motion vous permet d’animer l’élément div contenant le texte « Sent ! ».
Le composant initial, animeret sortie du composant de mouvement définissent les animations d’entrée et de sortie du composant. Lorsque le composant est rendu initialement, il commence avec une position x de -100 (hors de l’écran, à gauche) et une opacité de 0. Il devient alors invisible.
La propriété animate définit l’animation du composant lorsqu’il entre dans l’écran. Dans ce cas, il passe d’une position x de -100 à une position x de 0 (en glissant depuis la gauche) et s’estompe progressivement pour atteindre une opacité de 1 et devenir entièrement visible.
Enfin, la propriété exit définit la façon dont le composant doit s’animer lorsque vous le retirez de l’écran. Dans ce cas, le composant glissera hors de l’écran vers la gauche avec une position x de -100 et s’effacera progressivement jusqu’à une opacité de 0.
Vous devez également envelopper le composant motion avec le composant AnimatePresence de framer-motion pour animer les composants lorsque vous les retirez de l’arbre React DOM.
Maintenant que vous avez défini les animations d’entrée et de sortie, vous pouvez ajouter un bouton pour déclencher l’animation. Voici le composant modifié avec le bouton :
import { AnimatePresence, motion } from "framer-motion";
import { useState } from "react";
function App() {
const [isVisible, setIsVisible] = useState(true);
const toggleVisibility = () => {
setIsVisible(!isVisible);
};
return (
<>
<AnimatePresence>
{isVisible && ( <motion.div
initial={{ x: -100, opacity: 0 }}
animate={{ x: 0, opacity: 1 }}
exit={{ x: -100, opacity: 0 }}
>
<p>Sent!</p>
</motion.div>)}
</AnimatePresence>
<button onClick={toggleVisibility}>
Notify
</button>
</>
)
}
Ce code mis à jour ajoute une variable d’état appelée isVisible à l’aide du crochet useState. Cette variable permet de savoir si le composant doit être visible. La fonction toggleVisibility fait basculer la valeur de isVisible entre true et false lorsque vous cliquez sur le bouton.
Le rendu du composant dépend maintenant de la valeur de isVisible. Si isVisible est vrai, le composant de mouvement sera rendu avec l’animation d’entrée.
Enfin, ajoutez au bouton un gestionnaire d’événement onClick qui appelle la fonction toggleVisibility, met à jour l’état de isVisible et déclenche l’animation d’entrée ou de sortie du composant de mouvement.
Ajout d’une fonction d’assouplissement
Une fonction d’assouplissement contrôle le taux de changement de l’animation dans le temps. Elle définit la durée d’une animation en spécifiant comment l’animation doit s’accélérer ou se ralentir au fur et à mesure de sa progression. Sans fonction d’assouplissement, le rendu de l’animation risque d’être trop rapide.
Framer Motion propose plusieurs fonctions d’assouplissement, dont easeInOut. Importez-la en haut du fichier App.jsx de framer-motion pour l’utiliser.
import { motion, easeInOut } from "framer-motion";
Ajoutez-la ensuite à l’objet de transition dans le composant motion :
<motion.div
initial={{ x: -100, opacity: 0 }}
animate={{ x: 0, opacity: 1, transition: { duration: 0.5, ease: easeInOut } }}
exit={{ x: -100, opacity: 0, transition: { duration: 0.5, ease: easeInOut } }}
>
<p>Sent!</p>
</motion.div>
La propriété duration spécifie la durée de l’animation.
Utiliser du CSS simple pour des animations simples
Il y a beaucoup plus de choses que vous pouvez faire avec Framer Motion, y compris l’animation 3D. Cependant, vous n’avez pas toujours besoin d’une bibliothèque pour créer des animations. Pour les animations simples telles que les transitions de survol, vous pouvez toujours utiliser du simple CSS.
