Ce guide de la série + article passera en revue des exemples et des concepts de Framer Motion utilisés dans React et React Hooks couplés à des composants stylés.

Indice:

• Suivre
• Aperçu
• Animations
• Transitions
• Gestes
• Exemple de code
• Copier mon code

Suivre

Nous allons passer en revue plusieurs exemples d'utilisation de Framer Motion dans React. Utiliser uniquement des composants fonctionnels de réaction et des crochets de réaction. Nous utiliserons également des composants de style pour le style.

- La partie 2 arrivera bientôt suivre pour être averti -

Merci d'avoir lu, n'hésitez pas à applaudir et à faire part de vos commentaires.

Aperçu

Framer Motion fournit une API d'animation et de geste simple qui simplifie l'animation d'éléments HTML et SVG tout en conservant la sémantique.

Obtenir Framer Motion dans notre projet React

Framer-Motion nécessite que vous utilisiez React version 16.8 ou supérieure.

Dans votre application React, exécutez la commande suivante pour installer notre dépendance de mouvement Framer.

npm install framer-motion

Nous utiliserons également des composants de style pour rendre nos animations plus jolies.

npm install --save styled-components

Framer Motion simplifie les animations en passant des accessoires animés à vos éléments JSX. Une fois ces accessoires donnés, le mouvement du cadreur générera l'animation pour vous.

Ici, dans cet exemple, vous pouvez voir que nous avons créé un corps pour certains styles et supprimé certains styles natifs du navigateur.

Ensuite, nous avons créé un styled(motion.div)dans notre composant stylé. Si vous utilisez des composants stylés, vous pouvez simplement créer un div comme ceci<motion.div> content </motion.div>

Ensuite, nous avons passé l'accessoire d'animation au motion.divdex: 150, y: 150, scale: 1.5

Ici, vous pouvez voir que chaque fois que nous actualisons cette div, elle passe à 1,5, puis navigue de son emplacement initial aux positions y et x définies.

Maintenant, ce n'est pas très fluide, et ça se passe presque trop vite. Ne vous inquiétez pas, nous allons résoudre ce problème.

À quel point est-ce incroyable ? ! Tellement simple d'ajouter des animations à une simple div ! Passons aux transitions pour voir si nous pouvons rendre cela plus fluide.

Transitions

Si vous n'aimez pas les animations par défaut du mouvement de l'encadreur, vous pouvez passer votre élément ou SVG à l'accessoire de transition et le personnaliser.

Prenons notre dernier exemple qui allait beaucoup trop vite et ajoutons une certaine durée à l'accessoire de transition et voyons ce qui se passe.

transition={{ duration: 2 }}

Des suppositions sur ce qui va se passer?

Wow, regardez à quel point c'est plus fluide avec un simple accessoire de transition.

Framer rend cela incroyablement simple, bien que cet exemple ne soit peut-être pas pratique, il vous donne un exemple de la puissance de Framer et des possibilités infinies.

Jetons un coup d'œil à quelques valeurs de transition supplémentaires que vous pouvez passer et comment nous pouvons rendre cela encore plus fluide.

Ressort

transition={{ type: 'spring' }}

Une animation qui simule la physique du ressort pour un mouvement réaliste.

Il s'agit de l'animation par défaut pour les valeurs physiques telles que x, yet .scalerotate

Si vous remarquez à la fin de la transition, il respire presque dans sa position avec un peu de ressort si vous le devez. pun intended

facilité : Assouplissement | Assouplissement[]

La fonction d'accélération à utiliser. Définir comme l'un des ci-dessous.

• Nom d'une fonction d'accélération existante.
• Un tableau de quatre nombres pour définir une courbe de Bézier cubique.
• Une fonction d'accélération qui accepte et renvoie une valeur 0–1.

Ces chaînes sont les fonctions d'accélération nommées intégrées dans framer-motion.

• "linéaire"
• "easeIn", "easeOut", "easeInOut"
• « circIn », « circOut », « circInOut »
• "backIn", "backOut", "backInOut"
• "anticiper"

Dans le cas où vous avez une animation que vous souhaitez répéter en boucle, framer-motions permet d'appliquer la transition de répétition à l'élément de transition

Lorsque vous passez Répéter, cela signifie le nombre de fois pour répéter la transition. Réglez sur Infinitypour une répétition perpétuelle.

C'est tout ce que nous allons couvrir dans la zone de transition de framer-motion. Leurs possibilités sont évidemment infinies et si cet article reçoit suffisamment d'amour, j'en écrirai un deuxième !

Gestes

Framer Motion fonctionne de manière transparente avec les événements Reacts et prend en charge un éventail de gestes (survoler, appuyer, faire un panoramique et faire glisser)

Nous allons passer au survol, le survol c'est quand un utilisateur place son curseur sur un élément. Planant dessus.

L'accessoire framer-motion utilise pour exécuter une action en vol stationnaire est l'accessoirewhileHover

Dans l' whileHoveraccessoire, vous pouvez lui transmettre toutes les valeurs d'animation.

Dans l'exemple, nous passonsrotate, scale, and transition

Avec ce survol maintenant sur notre élément, il sera mis à l'échelle 1.1 et tournera.

L'ajout de ce type d'animation aux éléments de votre site Web le rend vivant.

Bien que vous ne vouliez peut-être pas tout faire tourner.

Exemple complet

Dans cet exemple complet, nous utilisons tout (plus un peu plus) de ce que nous avons parcouru.

Je pense que cela aidera à mettre tout cela en perspective.

Voici le résultat !!

Merci d'avoir consulté ce guide sur l'utilisation de Framer Motion avec React. Encore une fois, si vous avez fini par aimer cela et que vous l'avez trouvé utile, montrez-lui un peu d'amour et applaudissez-le. Si vous vouliez autre chose ou souhaitez voir un article différent dans le futur, commentez ou contactez-moi!

Copier mon code

Alors tu veux le code hein ?

Eh bien voilà ! Cliquez sur le lien github ci-dessous !

Trouvez-moi :
Github
LinkedIN