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

animate

A function to manually start and control animations

animate() is used to manually start and control animations.

It can animate:

  • Numbers, colors, strings
  • MotionValues
  • HTML/SVG elements

Imported alone, it weighs around 15.5kb. When used in conjunction with the motion component there is around 1kb added bundlesize.

#Usage

#Import

Import animate from "framer-motion":

// React
import { animate } from "framer-motion"
// Universal
import { animate } from "framer-motion/dom"

Note: React users are recommended, in most instances, to use animate via useAnimate for composable animations.

#Animate a single value

By passing a to and from value, animate will output the latest values to the provided onUpdate callback.

// Numbers
animate(0, 100, {
onUpdate: latest => console.log(latest)
})
// Colors etc
animate("#fff", "#000", {
duration: 2
onUpdate: latest => console.log(latest)
})

#Animate a MotionValue

By passing animate a MotionValue, it'll be automatically updated with the latest values.

const x = motionValue(0)
animate(x, 200, { duration: 0.5 })

#Animate HTML/SVG elements

animate can accept element(s) and DOM selectors.

// Element(s)
const box = document.getElementById("box")
animate(box, { opacity: 0 }, { duration: 0.5 })
// Selectors
animate("div", { x: [0, 100] }, { type: "spring" })

When possible, animations on DOM elements will be hardware accelerated.

#Animate sequences

animate can also accept complex animation sequences.

const sequence = []
animate(sequence)

A sequence is an array of DOM and/or MotionValue animate definitions.

const progress = useMotionValue(0)
const sequence = [
["ul", { opacity: 1 }, { duration: 0.5 }],
[progress, 100, { ease: "easeInOut" }]
]

Each definition will, by default, play one after the other.

const sequence = [
["ul", { opacity: 1 }, { duration: 0.5 }],
["li", { x: [-100, 0] }, { delay: stagger(0.1) }]
]

It's possible to change when a segment will play by passing an at option, which can be either an absolute time, relative time, or label.

const sequence = [
["ul", { opacity: 1 }],
["li", { x: [-100, 0] }, { at: 1 }]
]

Each segment can accept all Framer Motion transition options to control the duration and other animation settings of that segment.

const sequence = [
["ul", { opacity: 1 }, { duration: 1 }]
]

Both type: "keyframes" and type: "spring" transitions are supported.

It's also possible to override transitions on a per-value basis.

const sequence = [
[
"ul",
{ opacity: 1, x: 100 },
{ duration: 1, x: { duration: 2 }}
]
]

Sequence durations are automatically calculated, but it's possible to pass animation options to change playback:

animate(sequence, { duration: 10 })

#Stagger

When animating more than one element, it's possible to stagger animations by passing the stagger function to delay.

import { stagger, animate } from "framer-motion"
animate(".item", { x: 300 }, { delay: stagger(0.1) })

#Options

animate() supports all of Framer Motion's transition options.

Additionally, it accepts these options:

#at: string | number

Note: Animation sequences only.

const sequence = [
["ul", { opacity: 1 }],
["li", { x: [-100, 0] }, { at: 1 }]
]

By default, animation definitions within a sequence will play one after the other. By passing at to a definition's options, this behaviour can be changed.

Pass a number to define a specific time:

const sequence = [
["nav", { opacity: 1 }],
// This will start 0.5 from the start of the whole timeline:
["nav", { x: 100 }, { at: 0.5 }],
]

Pass a string starting with + or - to start relative to the end of the previous animation:

const sequence = [
["nav", { opacity: 1 }],
// This will start 0.5 seconds after the previous animation:
["nav", { x: 100 }, { at: "+0.5" }],
// This will start 0.2 seconds before the end of the previous animation:
["nav li", { opacity: 1 }, { at: "-0.2" }],
]

Pass "<" to start at the same time as the previous segment:

const sequence = [
["nav", { x: 100 }, { duration: 1 }],
// This will start at the same time as the x: 100 animation
["li", { opacity: 1 }, { at: "<" }],
]

Or pass a label name to start at the same point as the original label definition:

const sequence = [
["nav", { x: 100 }, { duration: 1 }],
"my-label",
["li", { opacity: 1 }],
// my-label was defined at 1 second
["a", { scale: 1.2 }, { at: "my-label" }],
]

#onUpdate: (latest) => void

Note: For single value and MotionValue animations only.

A function that's provided the latest animation values.

animate("#fff", "#000", {
duration: 2
onUpdate: latest => console.log(latest)
})

#Controls

animate() returns the following animation controls:

#duration: number

Returns the duration of the animation.

This is the duration of a single iteration of the animation, without delay or repeat options.

const animation = animate(x, 100, { duration: 1, repeat: 2 })
const { duration } = animation // 1

#time: number

Gets and sets the current time of the animation.

const animation = animate(x, 100, { duration: 1 })
// Set animation time to 0.5 seconds
animation.time = 0.5
// Get animation time
console.log(animation.time) // 0.5

#then(): Promise

Provide a function to run when the animation is finished.

This allows the animation to be awaited.

const animation = animate(0, 100)
// Callback
animation.then(() => {
console.log("Animation complete!")
})
// Async
await animation
console.log("Animation complete!")

Note: When an animation finishes, a new Promise is created. If the animation is then replayed via the play() method, any old callbacks won't fire again.

#pause(): void

Pause an animation.

animation.pause()

#play(): void

Play an animation.

  • If the animation is paused, it will resume from its current time.
  • If the animation has finished, the animation will restart.
animation.pause()
// Will resume from 1 second
animation.time = 1
animation.play()
// Will play from start
await animation
animation.play()

#stop(): void

Stops the animation.

Any values being animated via the Web Animations API will be committed to the element via style.

Stopped animations cannot be restarted.

animation.stop()

#complete(): void

Immediately completes the animation, running it to the end state.

animation.complete()

#cancel(): void

Cancels the animation, running it to the initial state.

animation.cancel()

#speed: number

Gets and sets the playback speed of the animation.

// Normal speed
animation.speed = 1
// Half speed
animation.speed = 0.5
// Double speed
animation.speed = 2
// Reverse
animation.speed = -1
PrevioususeReducedMotionNexttransform
On this page
  • Usage
  • Import
  • Animate a single value
  • Animate a MotionValue
  • Animate HTML/SVG elements
  • Animate sequences
  • Stagger
  • Options
  • Controls

Copyright © 2022 Framer B.V.

  • Security
  • Terms of Service
  • Privacy Statement