Créer des animations fluides avec Framer Motion

Introduction à Framer Motion

Framer Motion est une bibliothèque d'animations puissante pour React qui simplifie la création d'interfaces utilisateur dynamiques et interactives. Elle offre une API déclarative qui permet de créer des animations complexes avec un minimum de code.

Installation et configuration

Pour commencer avec Framer Motion dans votre projet React ou Next.js :

npm install framer-motion

Importez ensuite les composants nécessaires :

import { motion } from 'framer-motion';

Animations de base

La façon la plus simple de créer une animation est d'utiliser le composant motion :

// Animation simple avec fade-in et déplacement
<motion.div
  initial={{ opacity: 0, y: 20 }}
  animate={{ opacity: 1, y: 0 }}
  transition={{ duration: 0.5 }}
>
  Hello, animation!
</motion.div>

Transitions et variantes

Les variantes permettent de définir des états d'animation nommés et de les réutiliser :

const variants = {
  hidden: { opacity: 0, y: 20 },
  visible: { 
    opacity: 1, 
    y: 0,
    transition: {
      duration: 0.5,
      ease: "easeInOut"
    }
  }
};

<motion.div
  variants={variants}
  initial="hidden"
  animate="visible"
>
  Animation avec variantes
</motion.div>

Animations au défilement (Scroll Animations)

Les animations au défilement sont très populaires pour créer des sites web engageants :

<motion.div
  initial={{ opacity: 0 }}
  whileInView={{ opacity: 1 }}
  viewport={{ once: true }}
  transition={{ duration: 0.8 }}
>
  Je m'affiche quand vous défilez jusqu'à moi!
</motion.div>

Animations basées sur les gestes

Framer Motion facilite la création d'interactions basées sur les gestes de l'utilisateur :

<motion.button
  whileHover={{ scale: 1.1 }}
  whileTap={{ scale: 0.95 }}
  transition={{ type: "spring", stiffness: 400, damping: 17 }}
>
  Cliquez-moi
</motion.button>

Animations de page avec AnimatePresence

Pour les transitions de page ou les animations de composants qui entrent/sortent du DOM :

import { AnimatePresence, motion } from 'framer-motion';

function App() {
  const [isVisible, setIsVisible] = useState(true);
  
  return (
    <>
      <button onClick={() => setIsVisible(!isVisible)}>
        Toggle
      </button>
      
      <AnimatePresence>
        {isVisible && (
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
          >
            Ce contenu apparaît et disparaît en douceur
          </motion.div>
        )}
      </AnimatePresence>
    </>
  );
}

Animations avancées avec orchestration

Pour des séquences d'animations plus complexes, vous pouvez utiliser les délais et la propagation :

const containerVariants = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: {
      delayChildren: 0.3,
      staggerChildren: 0.2
    }
  }
};

const itemVariants = {
  hidden: { y: 20, opacity: 0 },
  visible: {
    y: 0,
    opacity: 1
  }
};

<motion.ul
  variants={containerVariants}
  initial="hidden"
  animate="visible"
>
  {items.map(item => (
    <motion.li key={item.id} variants={itemVariants}>
      {item.text}
    </motion.li>
  ))}
</motion.ul>

Optimisation des performances

Quelques conseils pour garder vos animations fluides :

• Privilégiez les propriétés transform et opacity qui sont moins coûteuses
• Utilisez layout avec parcimonie car il est plus lourd
• Évitez d'animer trop d'éléments simultanément
• Utilisez useReducedMotion pour respecter les préférences d'accessibilité

Conclusion

Framer Motion offre un équilibre parfait entre simplicité d'utilisation et puissance, ce qui en fait un choix idéal pour ajouter des animations professionnelles à vos projets React. En maîtrisant ses fonctionnalités, vous pourrez créer des expériences utilisateur mémorables qui se démarquent de la concurrence.