React - Animations et Interactions

Donner vie à tes interfaces, c'est ce qui va faire la différence entre une application "ok" et une application "wow". On va voir les meilleures librairies pour créer des animations fluides et performantes en React.

---

Pourquoi utiliser une librairie d'animation ?

Même si le CSS (transitions, keyframes) est puissant, les librairies JavaScript spécialisées offrent des avantages énormes :

• Animations basées sur la physique : pour des mouvements naturels et réalistes.
• Contrôle programmatique : démarrer, arrêter, enchaîner des animations complexes.
• Interactivité : réagir aux gestes de l'utilisateur (drag, hover, etc.).
• Performance : optimisations pour éviter de bloquer le thread principal.
• Animation de données : animer des nombres, des couleurs, des positions basées sur l'état de l'application.

---

Framer Motion - La Simplicité Déclarative

Framer Motion est une librairie d'animation open-source pour React, conçue pour être à la fois simple et puissante. Elle permet de créer des animations et des interactions complexes de manière déclarative. C'est la librairie qui motorise les animations incroyables de Framer, le constructeur de sites web pour les pros de la création.

Exemple de base

import { motion } from 'framer-motion'

function Box() {
  return (
    <motion.div
      className="box"
      initial={{ opacity: 0, scale: 0.5 }}
      animate={{ opacity: 1, scale: 1 }}
      transition={{ duration: 0.5 }}
      whileHover={{ scale: 1.1 }}
      whileTap={{ scale: 0.9 }}
    />
  )
}

---

React Spring - La Puissance de la Physique

React Spring est une librairie d'animation populaire qui utilise les principes de la physique des ressorts pour créer des animations fluides et naturelles. Contrairement aux librairies traditionnelles qui reposent sur des keyframes et des transitions linéaires, React Spring produit des animations qui répondent dynamiquement aux interactions et aux changements d'état.

Exemple de base

import { useSpring, animated } from '@react-spring/web'

function Number() {
  const { number } = useSpring({
    from: { number: 0 },
    to: { number: 100 },
    config: { duration: 2000 }
  })

  return <animated.div>{number.to(n => n.toFixed(0))}</animated.div>
}

---

GSAP (GreenSock) - Le Super-Héros de l'Animation

GSAP (GreenSock Animation Platform) est une librairie d'animation JavaScript agnostique (elle fonctionne avec n'importe quel framework). Elle transforme les développeurs en super-héros de l'animation. Construisez des animations haute performance qui fonctionnent dans tous les navigateurs majeurs. Animez du CSS, du SVG, du canvas, React, Vue, WebGL, des couleurs, des chaînes de caractères... tout ce que JavaScript peut toucher !

Exemple avec React

import { useLayoutEffect, useRef } from 'react'
import gsap from 'gsap'

function Box() {
  const boxRef = useRef()

  useLayoutEffect(() => {
    gsap.to(boxRef.current, {
      rotation: 360,
      duration: 2,
      ease: 'bounce.out'
    })
  }, [])

  return <div ref={boxRef} className="box" />
}

---

Shadertoy - Pour les Animations Graphiques Avancées

Shadertoy n'est pas une librairie d'animation classique, mais une plateforme pour créer et partager des shaders (des programmes qui s'exécutent sur la carte graphique) en utilisant GLSL. C'est l'outil ultime pour des effets visuels complexes, des animations génératives et des graphismes 3D que vous pouvez intégrer dans vos projets React via des librairies comme react-three-fiber.

---

Ressources pour aller plus loin

• 🎨 Framer Motion : Introduction
• 🔬 React Spring : Documentation
• 🦸 GSAP : Documentation v3
• 🌌 Shadertoy : Explorer des shaders