Comment créer des animations d’entrée et de sortie pour un composant React en utilisant Framer Motion

Animer un composant React lorsqu’il entre ou sort de l’écran peut être un défi. En effet, lorsque vous masquez 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 permet de créer facilement des animations douces et fluides sans avoir besoin d’écrire beaucoup de code JavaScript ou de trouver 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 donnent l’impression d’être réactives.

Pour démontrer comment utiliser Framer Motion dans React, vous allez animer 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 devrez installer Node.js et npm (Node Package Manager) sur votre machine si ce n’est pas déjà 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.

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.

Installation de Framer Motion dans React

Installez Framer Motion en exécutant cette commande :

Cette commande ajoutera Framer Motion en tant que 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 pour animer l’entrée et la sortie du composant. Vous pouvez utiliser les props 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.

Ensuite, créez le composant que vous souhaitez animer en l’enveloppant avec le 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.

Le composant motion vous permet d’animer l’élément div contenant le texte « Sent ! ».

Le composant initial, animer et sortir 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 vers la gauche) et une opacité de 0. Il devient alors invisible.

La propriété animate définit la manière dont le composant doit s’animer lorsqu’il entre dans l’écran, dans ce cas en passant d’une position x de -100 à une position x de 0 (en glissant depuis la gauche) et en s’estompant progressivement jusqu’à une opacité de 1 et en devenant 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 de mouvement 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 :

Ce code mis à jour ajoute une variable d’état appelée isVisible à l’aide du crochet useState. Cette variable indique 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 le timing 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.

Ajoutez-la ensuite à l’objet de transition dans le composant motion :

La propriété duration spécifie la durée de l’animation.

Utiliser des feuilles de style CSS simples pour les 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 CSS simple.

S’abonner à notre lettre d’information