On this Page

DerivedMotionValue

DerivedMotionValue<T> pairs a computed MotionValue<T> with destroy(). Use it when values are derived outside a Svelte component and the subscriptions need an explicit lifetime.

Usage

TypeScript

import {
	deriveMotionValue,
	type DerivedMotionValue,
	useMotionValue,
} from "fractalsvelte/motion";

const x = useMotionValue(12);
const y = useMotionValue(8);

const total: DerivedMotionValue<number> = deriveMotionValue(
	[x, y],
	(xValue, yValue) => xValue + yValue,
);

total.value.get(); // 20
total.destroy(); // release source subscriptions when no longer needed

API

Member	Type	Description
`value`	`MotionValue<T>`	The calculated value, updated whenever an input changes.
`destroy`	`() => void`	Unsubscribes the derived value from every input.

deriveMotionValue<Input, Output>(inputs, map) accepts an array of MotionValue<Input> sources and a mapper that receives their current values in order. It returns DerivedMotionValue<Output>.

Lifecycle

Call destroy() for values created outside component setup. In component-owned Svelte code, prefer the lifecycle-managed helpers such as useMotionValueState, useVelocityState, motionStyle, and motionCssVars when they better match the use case.