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

animate

A low-level animation function to animate a single value or a MotionValue.

animate is a simple function that can animate a single value, or a MotionValue. This is for very advanced use, and it's generally prefered to animate via the motion component.

#Animate a single value

By passing a to and from value, animate will output 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 instead, it'll be automatically updated with the latest values.

const x = useMotionValue(0)
useEffect(() => {
animate(x, 200)
}, [])

#Options

animate accepts the usual transition options. Additionally, it accepts onUpdate and onComplete that fire when the animation updates and finished respectively.

#Returns

animate returns an object of controls, currently with a single stop method.

#stop(): void

function Component({ isVisible }) {
const opacity = useMotionValue(0)
useEffect(() => {
const controls = animate(opacity, isVisible ? 1 : 0)
return controls.stop
}, [isVisible])
}
PrevioususeWillChangeNexttransform
On this page
  • Animate a single value
  • Animate a MotionValue
  • Options
  • Returns

Copyright © 2022 Framer B.V.

  • Security
  • Terms of Service
  • Privacy Statement