Developers
Back to framer.com
DocumentationUtilities
useAnimationFrame
  • Motion
  • Handshake
  • Guides
  • API Documentation
Developers
  • Motion
  • Handshake
  • Guides
  • API Documentation
Back to framer.com
Design and publish your first free site with Framer today.
Getting started
  • Introduction
  • Examples
Animation
  • Overview
  • Layout
  • Gestures
  • Scroll
  • Transition
Components
  • motion
  • AnimatePresence
  • LayoutGroup
  • LazyMotion
  • MotionConfig
  • Reorder
Motion values
  • Overview
  • 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
Code in Framer
  • Utilities
  • RenderTarget
  • Property Controls
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 a timestamp, in milliseconds, that is the duration of time since the callback was first called.

import { useAnimationFrame } from "framer-motion"
function Component() {
const ref = useRef(null)
useAnimationFrame(t => {
ref.current.style.transform = `rotateY(${t}deg)`
})
return <div ref={ref} />
}
PrevioususeAnimationControlsNextuseDragControls

Copyright © 2022 Framer B.V.

  • Security
  • Terms of Service
  • Privacy Statement