useVelocity

Creates a motion value that tracks the velocity of another motion value.

useVelocity takes a motion value and returns a new one that updates with its velocity.

<script lang="ts">
	import { motion, useMotionValue, useTransform, useVelocity } from "motion-sv";

	const x = useMotionValue(0);
	const xVelocity = useVelocity(x);
	const scaleX = useTransform(xVelocity, [-3000, 0, 3000], [1.6, 1, 1.6]);
	const scaleY = useTransform(xVelocity, [-3000, 0, 3000], [0.6, 1, 0.6]);
</script>

<motion.div drag="x" dragSnapToOrigin style={{ x, scaleX, scaleY }} />

Drag and throw the box. The faster it moves, the more it stretches:

<script lang="ts">
	import { motion, useMotionValue, useTransform, useVelocity } from "motion-sv";

	const x = useMotionValue(0);
	const xVelocity = useVelocity(x);
	// The faster the box moves, the more it stretches along the drag and squashes across it
	const scaleX = useTransform(xVelocity, [-3000, 0, 3000], [1.6, 1, 1.6]);
	const scaleY = useTransform(xVelocity, [-3000, 0, 3000], [0.6, 1, 0.6]);
</script>

<motion.div
	style={{ x, scaleX, scaleY, width: 100, height: 100, borderRadius: 20, background: "#ff0088", cursor: "grab" }}
	drag="x"
	dragSnapToOrigin
/>

Usage

Import useVelocity from motion-sv:

import { useVelocity } from "motion-sv";

Pass it any numerical motion value. It returns a new motion value that updates with the velocity of the original, in units per second:

<script lang="ts">
	import { motion, useMotionValue, useMotionValueEvent, useVelocity } from "motion-sv";

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

	useMotionValueEvent(xVelocity, "change", (latest) => {
		console.log("Velocity", latest);
	});
</script>

<motion.div style={{ x }} />

When the original value stops changing, the velocity keeps updating every frame until it reaches 0.

Like other hooks, call useVelocity during component setup, at the top level of the <script>.

Any numerical motion value works, even one returned by useVelocity:

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