Motion
Back to framer.com
DocumentationMotion values
useVelocity
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

useVelocity

Create a motion value that tracks the velocity of another.

useVelocity accepts a motion value and returns a new one that updates with the provided motion value's velocity.

#Usage

Import useVelocity from Framer Motion.

import { useVelocity } from "framer-motion"

Pass any numerical motion value to useVelocity. It'll return a new motion value that updates with the velocity of the original value.

import { useMotionValue, useVelocity } from "framer-motion"
function Component() {
const x = useMotionValue(0)
const xVelocity = useVelocity(x)
useEffect(() => {
return xVelocity.onChange((latestVelocity) => {
console.log("Velocity", latestVelocity)
})
}, [])
return <motion.div style={{ x }} />
}

Any numerical motion value will work. Even one returned from useVelocity.

const x = useMotionValue(0)
const xVelocity = useVelocity(x)
const xAcceleration = useVelocity(xVelocity)

#Examples

Drag this box fast or slow to see how velocity can be used to affect size and color:

PrevioususeTransformNextuseWillChange
On this page
  • Usage
  • Examples

Copyright © 2022 Framer B.V.

  • Security
  • Terms of Service
  • Privacy Statement