Création d'animations

Framer Motion est directement intégré à tous les composants dans Framer, car il alimente déjà toutes les animations no-code de la plateforme. Ces animations no-code sont généralement très bien optimisées, et nous vous recommandons de commencer par celles-ci. Si vous recherchez un rendu totalement unique, vous pouvez vous appuyer sur les techniques présentées dans ce guide. Découvrons d'abord plusieurs façons d'animer avec Framer Motion.

useAnimate()

useAnimate permet d'utiliser la fonction animate de manière ciblée pour les éléments situés à l'intérieur de votre composant. Il fournit une référence (ref) scope et une fonction animate où chaque sélecteur DOM est restreint à cette référence.

function Component() {
  const [scope, animate] = useAnimate()

  useEffect(() => {
    // This "li" selector will only select children
    // of the element that receives `scope`.
    animate("li", { opacity: 1 })
  })
  
  return <ul ref={scope}>{children}</ul>
}

function Component() {
  const [scope, animate] = useAnimate()

  useEffect(() => {
    // This "li" selector will only select children
    // of the element that receives `scope`.
    animate("li", { opacity: 1 })
  })
  
  return <ul ref={scope}>{children}</ul>
}

function Component() {
  const [scope, animate] = useAnimate()

  useEffect(() => {
    // This "li" selector will only select children
    // of the element that receives `scope`.
    animate("li", { opacity: 1 })
  })
  
  return <ul ref={scope}>{children}</ul>
}

Importez depuis "framer-motion". useAnimate renvoie deux arguments : une référence scope et une fonction animate. La référence scope doit être transmise soit à un élément HTML/SVG standard, soit à un composant motion.

function Component({ children }) {
  const [scope, animate] = useAnimate()
  
  return <ul ref={scope}>{children}</ul>
}

function Component({ children }) {
  const [scope, animate] = useAnimate()
  
  return <ul ref={scope}>{children}</ul>
}

function Component({ children }) {
  const [scope, animate] = useAnimate()
  
  return <ul ref={scope}>{children}</ul>
}

Cette fonction animate ciblée peut désormais être utilisée dans des effets et des gestionnaires d'événements pour animer des éléments. Nous pouvons soit utiliser l'élément ciblé :

animate(scope.current, { opacity: 1 }, { duration: 1 })

animate(scope.current, { opacity: 1 }, { duration: 1 })

animate(scope.current, { opacity: 1 }, { duration: 1 })

La plupart des animations seront réalisées avec le composant motion et la prop animate. Il existe un composant motion pour chaque élément HTML et SVG, par exemple motion.div, motion.circle, etc.

Lorsque ces valeurs changent, Framer Motion génère automatiquement une animation fluide vers les dernières valeurs. Cette animation offre un rendu optimal par défaut, mais elle peut être personnalisée grâce à la flexibilité de la prop transition.