Motion
Back to framer.com
DocumentationHooks
useAnimationFrame
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
  • scroll
  • inView
  • transform
  • stagger
  • frame
  • Easing functions
3D
  • Introduction
  • LayoutCamera
  • LayoutOrthographicCamera
  • MotionCanvas
Guides
  • Accessibility
  • Reduce bundle size
  • Upgrade guides
Community
  • GitHub
  • Discord

useAnimationFrame

An animation loop that outputs the latest frame time to the provided callback.

Runs a callback once every animation frame.

The callback is provided two arguments:

  • time, the total duration of time since the callback was first called.
  • delta, the total duration of time since the last animation frame.
import { useAnimationFrame } from "framer-motion"
function Component() {
const ref = useRef(null)
useAnimationFrame((time, delta) => {
ref.current.style.transform = `rotateY(${time}deg)`
})
return <div ref={ref} />
}
PrevioususeAnimateNextuseDragControls

Copyright © 2022 Framer B.V.

  • Security
  • Terms of Service
  • Privacy Statement