Utils

Guides

Introduction

Animation

Components

Motion values

Hooks

Guides

React Three Fiber

React

Introduction

Animation

Utils

Guides

Introduction

Animation

Components

Motion values

Hooks

Guides

React Three Fiber

React

useVelocity

Framer Motion is now Motion for React! Read more

useVelocity

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

const x = useMotionValue(0)
const xVelocity = useVelocity(x)
const scale = useTransform(
  xVelocity,
  [-3000, 0, 3000],
  [2, 1, 2],
  { clamp: false }
)

return <motion.div drag="x" style={{ x, scale }} />

Usage

Import useVelocity from Motion:

import { useVelocity } from "motion/react"

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)

  useMotionValueEvent(xVelocity, "change", latest => {
    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)

useTransform

useAnimate

Support Motion

Motion is open source. Sponsorships keep the project sustainable.

Every sponsor receives access to our private Discord, and an exclusive mobile and desktop wallpaper pack.

Become a sponsor