useAnimationControls

Note: useAnimate is now the preferred way to manually trigger animations. It works with any HTML/SVG element, not just motion components. It also offers powerful playback controls. However, it doesn't yet have the ability to trigger changes in variants, so it isn't yet deprecated.

Usually, animations in a motion component will be triggered automatically, either when the contents of the animate prop change or if a gesture (hover/tap etc) starts/stops.

useAnimationControls can create animation controls that can be used to manually start/stop animations on one or more motion components, or compose multiple animations together.

import { motion, useAnimationControls } from "framer-motion"

function Component() {
  const controls = useAnimationControls()
  
  useEffect(() => {
    controls.start({ scale: 2 })
  }, [])
  
  return <motion.div animate={controls} />
}

#Create

Create animation controls by calling useAnimationControls().

const controls = useAnimationControls()

Pass controls to one or more motion components via their animate prop.

<motion.div animate={controls} />

#Start/stop animations

Animations can be started with the controls.start method.

controls.start({
  x: "100%",
  backgroundColor: "#f00",
  transition: { duration: 3 },
})

start accepts either a set of values to animate to (and an optional transition), or, if the component(s) it's provided to has a variants prop set, a variant label.

controls.start("hidden")

#Sequence

start returns a Promise, so it can be used to sequence animations using await or then.

Different controls can be sequenced together, and these sequences can be composed into functions that themselves can then be sequenced.

const sequence = async () => {
  await menuControls.start({ x: 0 })
  return await itemControls.start({ opacity: 1 })
}

#Dynamic start

start can also accept a function that can dynamically start each component and the controls are bound to with a different animation definition.

Custom data can be sent to this function via the component's custom prop.

const controls = useAnimationControls()

useEffect(() => {
  controls.start(i => ({
    opacity: 0,
    x: 100,
    transition: { delay: i * 0.3 },
  }))
}, [])

return (
  <ul>
    <motion.li custom={0} animate={controls} />
    <motion.li custom={1} animate={controls} />
    <motion.li custom={2} animate={controls} />
  </ul>
)

#Returns

Returns a set of controls for manual starting/stopping of animations.

import { motion, useAnimationControls } from "framer-motion"

export default function() {
  const controls = useAnimationControls()
  
  return <motion.div animate={controls} >
}

#set(definition): void

Instantly set to a set of properties or a variant.

// With properties
controls.set({ opacity: 0 })

// With variants
controls.set("hidden")

#start(definition, transitionOverride): Promise<any>

Starts an animation on all linked components.

controls.start("variantLabel")
controls.start({
  x: 0,
  transition: { duration: 1 }
})

#stop(): void

Stops animations on all linked components.