transition

Named cubic Bézier easing presets (the classic easings.net set).


Package	`@vizejs/composable/transition`
Own the source	`vize lib pull composable:transition`
Runtime exports	`TransitionPresets`, `useTransition`, `cubicBezier`
Gzip budget	2304 B

Usage

import { TransitionPresets, useTransition, cubicBezier } from "@vizejs/composable/transition";

Runtime contract

Utility	Category	Stability	SSR	Hydration	Cleanup	Targets	Host globals	Uses
`useTransition`	timing	experimental	deterministic-fallback	stable	reactive-scope	web, desktop	`window`	`cubicBezier`, `tryOnScopeDispose`
`cubicBezier`	timing	experimental	safe	not-applicable	none	web, server, worker, native, desktop, terminal	—	—

API

`TransitionPresets`

Named cubic Bézier easing presets (the classic easings.net set).

const TransitionPresets

`useTransition`

Tween a number toward its reactive source. Each source change starts a new transition from the current output, so interrupted transitions stay continuous. Easing presets and Bézier points are solved with Newton–Raphson plus bisection. Without a frame scheduler (server rendering, tests) the output equals the source, which keeps SSR deterministic. Pending frames are cancelled with the owning scope.

function useTransition( source: MaybeRefOrGetter<number>, options?: UseTransitionOptions, ): Readonly<Ref<number>>

`useTransition`

Tween each element of a fixed-length numeric tuple.

function useTransition<const Source extends readonly number[]>( source: MaybeRefOrGetter<Source>, options?: UseTransitionOptions, ): Readonly<Ref<TransitionTupleOutput<Source>>>

`useTransition`

function useTransition( source: MaybeRefOrGetter<TransitionValue>, options: UseTransitionOptions = {}, ): Readonly<Ref<number | number[]>>

`cubicBezier`

Build an easing function from cubic Bézier control points.

function cubicBezier(points: CubicBezierPoints): (progress: number) => number

Types

`TransitionFrameHost`

Frame scheduler used by useTransition.

Member	Type	Description
`requestAnimationFrame`	`(callback: FrameRequestCallback) => number`	Schedule a callback before the next repaint.
`cancelAnimationFrame`	`(handle: number) => void`	Cancel a scheduled frame.

`UseTransitionOptions`

Options for useTransition.

Member	Type	Description
`duration`?	`MaybeRefOrGetter<number>`	Duration in milliseconds.
`delay`?	`MaybeRefOrGetter<number>`	Delay before each transition starts, in milliseconds.
`easing`?	`MaybeRefOrGetter<TransitionEasing>`	Easing function, preset name, or cubic Bézier points.
`disabled`?	`MaybeRefOrGetter<boolean>`	Jump to the source value without animating.
`onStarted`?	`() => void`	Called when a transition starts.
`onFinished`?	`() => void`	Called when a transition reaches its target.
`host`?	`MaybeRefOrGetter<TransitionFrameHost \| null \| undefined>`	Frame scheduler. Without one (server rendering) the output mirrors the source immediately.