Créez des Animations Fluides avec Framer Motion en React

Framer Motion est une bibliothèque d'animations pour React qui permet de créer des animations fluides et interactives avec facilité. Dans ce tutoriel, nous allons explorer les étapes pour intégrer Framer Motion dans votre projet React et créer quelques animations simples.

Prérequis:

• Connaissances de base en React
• Node.js et npm installés sur votre machine
• Un projet React configuré (vous pouvez en créer un rapidement avec create-react-app)

Étape 1 : Installation de Framer Motion

Pour commencer, ouvrez votre terminal et naviguez jusqu'au répertoire de votre projet. Exécutez la commande suivante pour installer Framer Motion :

npm install framer-motion

Étape 2 : Créez votre première animation

Dans cet exemple, nous allons animer un texte en utilisant un élément <span>. Ce texte se déplacera légèrement vers le haut lors de son apparition.

import React from 'react';
import { motion } from 'framer-motion';

function AnimatedText() {
  return (
    <motion.span 
      animate={{ y: -20 }} 
      transition={{ duration: 0.5 }}
    >
      Un texte animé !
    </motion.span>
  );
}

export default AnimatedText;

Explication du code :

• motion.span : En utilisant motion.span, vous transformez le <span> en un composant animé.
• animate={{ y: -20 }} : Cette propriété indique que le texte sera déplacé de 20 pixels vers le haut (axe Y) au chargement.
• transition={{ duration: 0.5 }} : Cette transition dure 0,5 seconde, rendant l'animation fluide.

Étape 3 : Ajoutez une transition personnalisée

Pour rendre l'animation encore plus engageante, vous pouvez ajuster la transition :

function AnimatedText() {
  return (
    <motion.span 
      animate={{ y: -20 }} 
      transition={{ duration: 0.8, ease: "easeInOut" }}
    >
      Un texte animé !
    </motion.span>
  );
}

Explication du code :

• ease: "easeInOut" : Cela rend l'animation plus naturelle, avec un démarrage lent, une accélération au milieu, et un ralentissement en fin de mouvement.

Étape 4 : Ajouter des animations sur survol

Nous pouvons également ajouter des animations lorsqu'un utilisateur survole l'élément.

function AnimatedText() {
  return (
    <motion.span 
      animate={{ y: -20 }} 
      whileHover={{ scale: 1.1 }} 
      transition={{ duration: 0.3 }}
    >
      Un texte animé !
    </motion.span>
  );
}

Explication :

• whileHover={{ scale: 1.1 }} : Lorsque l'utilisateur survole le texte, celui-ci augmente légèrement de taille.

Étape 6 : Utiliser whileInView pour des animations au défilement

La propriété whileInView permet d’animer un élément lorsqu’il entre dans la zone de vision de l'utilisateur. C'est une excellente façon d'attirer l'attention sur des éléments spécifiques au moment où ils deviennent visibles.

Dans cet exemple, nous allons créer un élément qui s'animera en apparaissant progressivement lorsque l'utilisateur le fait défiler dans la fenêtre de visualisation.

import React from 'react';
import { motion } from 'framer-motion';

function InViewAnimation() {
  return (
    <motion.div 
      initial={{ opacity: 0, y: 50 }} 
      whileInView={{ opacity: 1, y: 0 }} 
      transition={{ duration: 0.5 }}
      style={{ padding: '20px', background: '#f0f0f0', margin: '20px 0' }}
    >
      Ce texte apparaît au défilement !
    </motion.div>
  );
}

export default InViewAnimation;

Explication du code:

• initial={{ opacity: 0, y: 50 }} : L'élément commence avec une opacité de 0 (transparent) et est décalé de 50 pixels vers le bas (axe Y).
• whileInView={{ opacity: 1, y: 0 }} : Lorsque l'élément entre dans la vue de l'utilisateur, il devient complètement opaque et se déplace à sa position d'origine (y = 0).
• transition={{ duration: 0.5 }} : L'animation se déroule sur une durée de 0,5 seconde, offrant un effet fluide lors de l’apparition.

Conclusion

Bravo ! Vous avez maintenant les bases pour utiliser Framer Motion dans vos projets React. Dans ce tutoriel, vous avez découvert comment :

• Installer Framer Motion et créer des animations simples.
• Ajouter des transitions personnalisées pour donner vie à vos éléments.
• Animer des textes au survol pour rendre l'interaction plus engageante.
• Utiliser whileInView pour faire apparaître des éléments au défilement.

Ce n'est que le début ! Framer Motion offre une multitude d'autres possibilités d'animations, allant des mouvements complexes aux effets de déformation. N'hésitez pas à expérimenter et à explorer les différentes options qu'il propose.