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"

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 }} />
}

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)

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:

PrevioususeTransform NextuseWillChange

Getting started

Animation

Components

Motion values

Utilities

3D

Guides

Community

useVelocity

#Usage

#Examples

On this page