Skip to main content

useMotionValueEvent

Subscribe to motion value events with automatic cleanup.

Motion values emit events. useMotionValueEvent subscribes to one and unsubscribes automatically when the component is destroyed.

		<script>
	import { motion, useMotionValue, useMotionValueEvent } from "motion-start";
 
	const x = useMotionValue(0);
 
	useMotionValueEvent(x, "change", (latest) => {
		console.log(latest);
	});
</script>
 
<motion.div drag="x" style={{ x }} />

Events

Event Description
change The value changed. Receives the latest value.
animationStart An animation started driving the value.
animationComplete The animation finished.
animationCancel The animation was interrupted.

Without the hook

Outside of a component, subscribe directly and clean up yourself:

		const unsubscribe = x.on("change", (latest) => console.log(latest));