Your system asks for reduced motion, so VFX-JS draws nothing. Demos on this site show plain HTML.

Interface

TransitionEffect

import type { TransitionEffect } from "@vfx-js/core";

An effect that takes part in a run. Outside a run it is skipped and the chain passes its input through. render also runs while the old content is held (ctx.holding); pass the input through then unless you need those frames. update runs only while the animation plays.

Extends: Effect
Extended by: Transition

Properties

enabled from Effect

enabled?: boolean

Whether this effect renders. (Default: true)

Set to false to skip this effect's render(): the chain passes its input straight through to the next stage (or to the canvas if it is the last stage), with no draw. Re-checked every frame, so it is a cheap runtime toggle — the effect stays attached and keeps its buffers, paying no re-init cost.

init and update still run while disabled, so stateful effects stay warm and re-enable seamlessly. Omitting the field (or undefined) means enabled.

Methods

dispose from Effect

dispose?(): void

end

end?(): void

Called once when the run ends, is dropped or is cancelled.

init from Effect

init?(ctx: EffectContext): void | Promise<void>

outputRect from Effect

outputRect?(dims: EffectDims): ElementRect | undefined

The rect this stage draws into, as [x, y, w, h].

Coordinates are in physical pixels, relative to the element, with the origin at the bottom-left.

Omit this method (or return undefined) when the effect does not change the size of the content, such as a grayscale or invert filter. The stage then draws into the same rect as its input.

Some common rects to return:

dims.contentRect — just the element, with no extra space.
The element plus px extra pixels on every side, for effects like blur, glow, or drop shadow: [-px, -px, elementPixel[0] + 2 * px, elementPixel[1] + 2 * px].
dims.canvasRect — the whole canvas, including the scrollPadding area around the viewport.

Each stage picks its own rect. If one stage returns 100×100 and the next returns 50×50, those are the sizes used; rects do not grow as the chain runs.

render

render?(ctx: TransitionEffectContext): void

Render phase. Omit to make this effect transparent in the chain.

start

start?(run: TransitionRun): void

Called once per run while the old content is held, before the first frame.

update

update?(ctx: TransitionEffectContext): void

State-update phase. ctx.src / ctx.target may point to stale / previous-frame handles here, so ctx.draw() MUST NOT be called. If called, the orchestrator silently ignores it.