Motion
Back to framer.com
DocumentationUtilities
useAnimationControls
Motion
Back to framer.com
Design and publish your first free site today.
Getting started
  • Introduction
  • Examples
Animation
  • Overview
  • Layout
  • Gestures
  • Scroll
  • Transition
Components
  • motion
  • AnimatePresence
  • LayoutGroup
  • LazyMotion
  • MotionConfig
  • Reorder
Motion values
  • Overview
  • useMotionValueEvent
  • useMotionTemplate
  • useScroll
  • useSpring
  • useTime
  • useTransform
  • useVelocity
  • useWillChange
Utilities
  • animate
  • transform
  • useAnimationControls
  • useAnimationFrame
  • useDragControls
  • useInView
  • useReducedMotion
3D
  • Introduction
  • LayoutCamera
  • LayoutOrthographicCamera
  • MotionCanvas
Guides
  • Accessibility
  • Reduce bundle size
  • Upgrade guides
Community
  • GitHub
  • Discord

useAnimationControls

Manual controls for triggering animations in a motion component.

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.

definition: ControlsAnimationDefinition

Properties or variant label to animate to

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

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

Starts an animation on all linked components.

definition: ControlsAnimationDefinition

Properties or variant label to animate to

transitionOverride: Transition

Optional transition to apply to a variant

returns: Promise<any>

A Promise that resolves when all animations have completed

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

#stop(): void

Stops animations on all linked components.

PrevioustransformNextuseAnimationFrame
On this page
  • Create
  • Start/stop animations
  • Sequence
  • Dynamic start
  • Returns

Copyright © 2022 Framer B.V.

  • Security
  • Terms of Service
  • Privacy Statement