Motion
Back to framer.com
DocumentationUtilities
useAnimate
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
  • stagger
  • useAnimate
  • useAnimationFrame
  • useDragControls
  • useInView
  • useReducedMotion
3D
  • Introduction
  • LayoutCamera
  • LayoutOrthographicCamera
  • MotionCanvas
Guides
  • Accessibility
  • Reduce bundle size
  • Upgrade guides
Community
  • GitHub
  • Discord

useAnimate

Create an animate function with scoped selectors and automatic cleanup.

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

Additionally, when the component calling useAnimate is removed, all animations started with its returned animate function will be cleaned up automatically.

#Usage

Import from "framer-motion".

import { useAnimate } from "framer-motion"

useAnimate returns two arguments, a scope ref and an animate function.

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

This 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 directly:

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

Or by passing it a selector.

animate("li", { backgroundColor: "#000" }, { ease: "linear" })

This selector is "li", but we're not selecting all li elements on the page, only those that are a child of the scoped element.

#Scroll-triggered animations

Animations can be triggered when the scope scrolls into view by using useAnimate with useInView.

import { useAnimate, useInView } from "framer-motion"
function Component() {
const [scope, animate] = useAnimate()
const isInView = useInView(scope)
useEffect(() => {
if (isInView) {
animate(scope.current, { opacity: 1 })
}
}, [isInView])
return (
<ul ref={scope}>
<li />
<li />
<li />
</ul>
)
}

#Exit animations

It's possible to compose your own exit animations when a component is removed using useAnimate in conjunction with usePresence.

import { useAnimate, usePresence } from "framer-motion"
function Component() {
const [isPresent, safeToRemove] = usePresence()
const [scope, animate] = useAnimate()
useEffect(() => {
if (isPresent) {
const enterAnimation = async () => {
await animate(scope.current, { opacity: 1 })
await animate("li", { opacity: 1, x: 0 })
}
enterAnimation()
} else {
const exitAnimation = async () => {
await animate("li", { opacity: 0, x: -100 })
await animate(scope.current, { opacity: 0 })
safeToRemove()
}
exitAnimation()
}
}, [isPresent])
return (
<ul ref={scope}>
<li />
<li />
<li />
</ul>
)
}

This component can now be conditionally rendered as a child of AnimatePresence.

<AnimatePresence>
{show ? <Component key="dialog" /> : null}
</AnimatePresence>

PreviousstaggerNextuseAnimationFrame
On this page
  • Usage
  • Scroll-triggered animations
  • Exit animations

Copyright © 2022 Framer B.V.

  • Security
  • Terms of Service
  • Privacy Statement