Motion Values
Create, derive, transform, subscribe to, and bind animated values safely in Svelte.Overview
The motion value utilities cover imperative values plus Svelte-aware facades. Use them when a value drives more than one visual destination or needs animation independent of a component render cycle.
Behaviour and customization
useMotionValue creates a subscribable value; useSpring and useTransform derive animated values. useMotionValueState and useVelocityState expose values to rune-based templates with lifecycle-safe cleanup.
Use motionStyle for ordinary inline properties and motionCssVars for custom properties. Destroy derived values created outside a component; component-owned reactive helpers release their subscriptions automatically.
Usage
<script lang="ts">
import { motionCssVars, useMotionValue, useSpring } from 'fractalsvelte/motion';
const progress = useMotionValue(0);
const smoothProgress = useSpring(progress);
</script>
<div use:motionCssVars={{ '--progress': smoothProgress }} />API
| Prop | Type | Default | Description |
|---|---|---|---|
useMotionValue | (initial) => MotionValue | - | Mutable, subscribable source value. |
deriveMotionValue | (inputs, map) => DerivedMotionValue | - | Derived value with destroy cleanup. |
motionStyle / motionCssVars | action factory | - | Binds values to an element. |
Components and blocks
Use this primitive directly for custom interfaces; Fractalsvelte also applies it or its motion language in these areas:
- Charts
- custom progress indicators
- CSS-variable-driven visuals
For exact built-in component timing and reduced-motion behaviour, see the Motion guide.