Animations de construction

Framer Motion est intégré à tous les composants de Framer, car il alimente déjà toutes les animations sans code dans Framer. Les animations sans code sont généralement très optimisées, et nous recommandons de commencer par celles-ci. Si vous voulez quelque chose de complètement unique, vous pouvez tirer parti des techniques de ce guide. Commençons par examiner quelques façons d'animer dans Framer Motion.

useAnimate()

useAnimate fournit un moyen d'utiliser la fonction animate qui est limitée aux éléments de votre composant. Il fournit une référence scope, et une fonction animate où chaque sélecteur DOM est limité à 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>
}

Importer depuis "framer-motion". useAnimate retourne deux arguments, une référence scope et une fonction animate. La référence scope doit être passée à un élément HTML/SVG ordinaire ou à un composant motion.

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

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

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

La plupart des animations seront effectuées avec le composant motion et la propriété 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érera automatiquement une animation vers les dernières valeurs. Cette animation sera agréable par défaut, mais elle peut être configurée avec la propriété de transition flexible.