Transition

In NarraLeaf-React, transitions animate the change from one image to another — a character sprite swap, a background change, or a scene jump.

Engines and Patterns

The transition API separates how the change plays from what shape it takes:

• Engines are transition classes. They are instantiated with new, and every engine takes a single options object: new Dissolve({ duration: 500 }).
• Patterns are geometry. They are built with the static factories on Mask and passed to a mask-driven engine's pattern option. Patterns are plain values — they are never instantiated with new.

A transition therefore reads as engine(animation): the engine decides how the pixels change, and the pattern is the animation it plays.

import { Reveal, ThroughColor, Mask } from "narraleaf-react";

// Reveal the next image directly through a clock sweep
image.char("image1.jpg", new Reveal({ duration: 1200, pattern: Mask.clock() }));

// The same geometry, but passing through a black hold
image.char("image1.jpg", new ThroughColor({ duration: 1800, pattern: Mask.clock() }));

Example

import { Dissolve } from "narraleaf-react";

image.char("image1.jpg", new Dissolve({ duration: 3000, easing: "linear" }));

Built-in Transitions

Image Transitions

• Dissolve - crossfade between the two images
• Fade In - fade in the next image, optionally travelling from a pixel offset
• Blur Dissolve - crossfade through a blur
• Push - slide the next image in while the current one slides out
• Reveal - reveal the next image directly through any mask pattern
• Through Color - cover with a colour, hold, then uncover on the next image

Mask Patterns

• Mask - the pattern vocabulary shared by Reveal and Through Color: wipe, barn door, iris, clock, fan, blinds, and dots, plus Mask.invert and hand-written custom patterns