Guide

Building Animations

Framer Motion comes built in to all components in Framer, as it already powers all of the no-code animations in Framer. The no-code animations are generally very optimised, and we recommend to start with those. If you want something fully unique, you can leverage the techniques in this guide. Lets start by looking at a couple ways to animate in Framer Motion.

`useAnimate()`

useAnimate provides a way of using the animate function that is scoped to the elements within your component. It provides a scope ref, and an animate function where every DOM selector is scoped to this ref.

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>
}

Import from "framer-motion". useAnimate returns two arguments, a scope ref and an animate function. The scope ref must be passed to either a regular HTML/SVG element or a motion component.

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

This scoped animate function can now be used in effects and event handlers to animate elements. We can either use the scoped element:

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

`<motion.div />`

Most animations will be performed with the motion component and the animate prop. There's a motion component for every HTML and SVG element, for instance motion.div, motion.circle etc.

<motion.div animate={{ x: 100 }} />

When these values change, Framer Motion will automatically generate an animation to the latest values. This animation will feel great by default, but it can be configured with the flexible transition prop.