Comment ajouter des animations à vos applications React avec Framer Motion

L’animation est une partie cruciale de presque toutes les applications web modernes. C’est aussi l’une des parties les plus difficiles à réussir.

Framer Motion est une bibliothèque conçue pour React qui facilite l’animation des composants.

Comment fonctionne Framer Motion

Framer Motion utilise le composant motion pour les animations. Chaque élément HTML/SVG a un composant de mouvement équivalent qui a des accessoires pour les gestes et les animations. Par exemple, une div HTML ordinaire ressemble à ceci :

 <div> </div>
 

Alors que l’équivalent Framer Motion ressemble à ceci :

 <motion.div> </motion.div>
 

Les composants de mouvement prennent en charge un animer qui déclenche des animations lorsque ses valeurs changent. Pour les animations complexes, utilisez la propriété useAnimate Le crochet avec un ref scopé.

Animation dans Framer Motion

Avant d’utiliser Framer Motion dans votre projet, vous devez avoir installé le runtime Node.js et le gestionnaire de paquets Yarn sur votre ordinateur et comprendre ce qu’est React et comment l’utiliser.

Ouvrez votre terminal et exécutez :

 git clone git@github.com:makeuseofcode/framer-motion-app.git
cd framer-motion-app
yarn
yarn dev
 

Lorsque vous ouvrez localhost:5173 dans votre navigateur, vous verrez ceci :

Vous pouvez maintenant créer votre première animation simple, un bouton qui s’agrandit au survol et se rétrécit lorsque le curseur quitte l’écran.

Ouvrez la fenêtre src/App.jsx dans un éditeur de code. Ce fichier contient un composant fonctionnel qui renvoie un fragment React. Importez le fichier Bouton puis rendez-le, en lui passant un objet de type texte prop :

 <section>
    <h4>Animated Button</h4>
    <div>Move your mouse over the button to see the effect</div>
    <Button text="Hover Me"/>
</section>
 

Ensuite, modifiez le fichier Button.jsx et importez le fichier motion utilitaire de framer-motion:

 import { motion } from "framer-motion"
 

Maintenant, remplacez le fichier normal avec l’élément mouvement.[element] composant. Dans ce cas, utilisez le composant motion.button composant.

Ajoutez ensuite un whileHover gesture prop et transmet un objet de valeurs que Framer Motion doit animer lorsque l’utilisateur survole le bouton.

 <motion.button whileHover={{ scale: 1.1 }}>

{text}

</motion.button> 

Le bouton s’animera désormais lorsque vous déplacerez le pointeur de votre souris au-dessus ou en dehors du bouton :

Vous vous demandez peut-être pourquoi cette démo n’utilise pas plutôt des animations CSS. Framer Motion a des avantages sur CSS parce qu’il s’intègre avec React state et résulte généralement en un code plus propre.

Ensuite, essayons quelque chose de plus complexe : animer une fenêtre modale. En Backdrop.jsximportez l’utilitaire de mouvement et créez un composant fonctionnel avec onClick et enfants accessoires. Retourner un motion.div composant de classe « backdrop » et onClick dans le JSX.

 export default function Backdrop() {
    return (<>
        <motion.div>
        </motion.div>
    </>)
}
 

Ajoutez ensuite trois accessoires, à savoir initial, animer, et sortie. Ces accessoires représentent respectivement l’état d’origine du composant, l’état vers lequel le composant doit s’animer et l’état dans lequel le composant doit se trouver après l’animation.

Ajouter onClick et enfants accessoires pour les motion.div et fixer la durée de la transition à 0,34 seconde :

 export default function Backdrop ({onClick, children}){
    return (<>
        <motion.div
            onClick={onClick}
            className="backdrop"
            initial={{ opacity: 0, backdropFilter:"blur(0px)" }}
            animate={{ opacity: 1, backdropFilter:"blur(3.4px)" }}
            exit={{ opacity: 0, backdropFilter:"blur(0px)"}}
            transition={{
                duration: 0.34,
            }}
        >
            {children}
        </motion.div>
    </>)
}
 

Le La toile de fond est une enveloppe pour le composant Modal composant. Un clic sur la toile de fond permet de fermer la fenêtre modale. En Modal.jsx, import motion et le composant Backdrop. Le composant fonctionnel par défaut accepte les accessoires : closeModal et texte. Créer une variable variante en tant qu’objet.

     const variants = {
        initial: {
            y: "-200%",
            opacity: 1,
        },
        visible: {
            y: "50%",
            transition: {
                duration: 0.1,
                type: "spring",
                damping: 32,
                stiffness: 500
            }
        },
        exit: {
            y: "200%",
        }
    }
 

Retourne un composant motion.div enveloppé par un composant Backdrop avec une propriété « variants » pointant vers l’objet variants. Les variantes sont un ensemble d’états d’animation prédéfinis dans lesquels le composant peut se trouver.

 <Backdrop onClick={closeModal}>
    <motion.div
        onClick={(e) => e.stopPropagation()}
        className="modal"
        variants={variants}
        initial='initial'
        animate='visible'
        exit='exit'
    >
        {text}
    </motion.div>
</Backdrop>
 

Ensuite, vous devez ajouter la fonctionnalité permettant d’afficher la fenêtre modale lorsque l’utilisateur clique sur le bouton. Ouvrez le fichier App.jsx et importez le fichier useState Le crochet React et la fonction Modale composant.

 import { useState } from "react";
import Modal from "./components/Modal";
 

Créez ensuite un modalOpen dont la valeur par défaut est faux.

 const [modalOpen, setModalOpen] = useState(false);
 

Définissez ensuite une fonction closeModal qui définit l’option modalOpen à false.

 function closeModal() {
    setModalOpen(false)
}
 

En haut du fragment React, rendre conditionnellement un fichier Modal et transmet le composant texte avec la propriété closeModal.

 {modalOpen && <Modal text="This is a modal animated with Framer Motion"}
 

Ensuite, dans le second section rend un élément bouton avec un gestionnaire d’événement onClick qui attribue la valeur false à modalOpen.

 <button onClick={() => setModalOpen(true)}>Show Modal</button>
 

Vous pouvez remarquer que React démonte le composant Modal du DOM sans animation de sortie. Pour corriger cela, vous avez besoin d’un élément AnimatePresence composant. Importer AnimatePresence de framer-motion.

 import {AnimatePresence} from 'framer-motion';
 

Maintenant, enveloppez le composant Modal dans le composant AnimatePresence et définissez le paramètre initial prop à faux et le mode à « attendre ».

 <AnimatePresence initial={false} mode="wait">
    {modalOpen && <Modal text="This is a modal animated with Framer Motion" closeModal={closeModal} />}
</AnimatePresence> 

Le composant AnimatePresence permet aux animations de sortie de se terminer avant que React ne le démonte du DOM.

Animer des composants sur le scroll dans Framer

Framer Motion permet d’animer des composants sur le défilement à l’aide de la fonction whileInView prop. Ouvrir le ScrollElement.jsxet importez le fichier motion utilitaire. Changer div à motion.div avec la classe « scroll-element ».

 <motion.div
    initial={{ opacity: 0, scale: 0, rotate: 14 }}
    whileInView={{ opacity: 1, scale: 1, rotate: 0 }}
    transition={{ duration: .8 }}
    viewport={{ once: true }}
    className='scroll-element'
>
    Scroll Element
</motion.div>
 

Le fenêtre prop pointe vers un objet qui définit une fois à vrai. Ensuite, dans le App.jsx importez le fichier ScrollElement et définir une variable scrollElementCount qui contient une valeur entière.

 let scrollElementCount=14;
 

Dans le dernier section créer un tableau d’une longueur spécifique définie par l’élément scrollElementCount qui fait correspondre chaque élément du tableau et génère un composant avec une clé unique basée sur l’index. i.

 {[...Array(scrollElementCount)].map((x, i) => <ScrollElement key={i} />)}
 

De retour dans le navigateur, les éléments doivent s’animer lorsque vous les faites défiler.

Alternatives à Framer Motion

Framer Motion n’est pas la seule bibliothèque d’animation sur le marché. Si vous n’aimez pas la façon dont Framer Motion fait les choses, vous pouvez essayer d’autres bibliothèques comme React Spring.

Vous pouvez également utiliser les animations CSS, que tous les navigateurs modernes supportent nativement, mais les techniques impliquées peuvent être difficiles à apprendre et à mettre en place.

Améliorer l’expérience utilisateur grâce aux animations

Chaque utilisateur s’attend à une expérience fluide lorsqu’il utilise une application web. Un site web ou une application sans animations donne l’impression d’être statique et peu réactif. Les animations améliorent l’expérience de l’utilisateur parce que vous pouvez les utiliser pour communiquer un retour d’information à l’utilisateur lorsqu’il effectue une certaine action.