useTransition

v0.0.15testeddemo

Reactively transition between numeric values (or numeric arrays) over a duration with configurable easing. Wraps a single, paused `requestAnimationFrame` loop that only runs while a transition is in flight, so it is cheaper than re-creating an RAF loop per change. SSR-safe: without a `window` the output tracks the source synchronously.

Source Tests

Examples

const progress = ref(0);
const output = useTransition(progress, {
  duration: 500,
  transition: TransitionPresets.easeOutCubic,
});

// Transition a tuple (e.g. an RGB color)
const color = ref([0, 0, 0]);
const animated = useTransition(color, { duration: 1000 });

Demo

Loading demo…

Signature

export function useTransition<T extends TransitionValue>(
  source: MaybeRefOrGetter<T>,
  options: UseTransitionOptions & ConfigurableWindow ={ ... }

Type Parameters

Textends TransitionValue

Parameters

Parameter	Type	Default	Description
`source`	`MaybeRefOrGetter<T>`	—	The reactive source value (number or number[])
`options`?	`any`	`{}`	Transition options

Returns

Readonly<Ref<T, T>>A readonly ref of the transitioned value