NarraLeaf

Displayable

Displayable defines all the properties and methods that a displayable element should have. Displayable elements are elements that can be displayed on the screen.
Ex. Image, Text

Chainable Methods

pos

Transform the element to a new position.

element.pos({
    xalign: 0.3
}, 1000, "linear"); // Move the element to x: 0.3 in 1000ms with linear ease.
  • position: CommonDisplayableConfig["position"] - The new position of the element, see CommonDisplayableConfig
  • duration?: number - The duration of the transform in milliseconds
  • easing?: TransformDefinitions.EasingDefinition - The easing function to use, see TransformDefinitions.EasingDefinition

scale

Scale the element.

element.scale(1.5, 0.8, 1000, "easeInOut"); // Scale the element to 1.5x on X-axis and 0.8x on Y-axis in 1000ms with easeInOut ease.
  • scaleX: number - The new scale of the element on the X-axis, use negative value to invert the scale
  • scaleY: number - The new scale of the element on the Y-axis, use negative value to invert the scale
  • duration?: number - The duration of the transform in milliseconds
  • easing?: TransformDefinitions.EasingDefinition - The easing function to use, see TransformDefinitions.EasingDefinition

scaleX

Scale the element on the X-axis.

element.scaleX(1.5, 1000, "easeInOut"); // Scale the element to 1.5x on X-axis in 1000ms with easeInOut ease.
  • scaleX: number - The new scale of the element on the X-axis
  • duration?: number - The duration of the transform in milliseconds
  • easing?: TransformDefinitions.EasingDefinition - The easing function to use, see TransformDefinitions.EasingDefinition

scaleY

Scale the element on the Y-axis.

element.scaleY(0.8, 1000, "easeInOut"); // Scale the element to 0.8x on Y-axis in 1000ms with easeInOut ease.
  • scaleY: number - The new scale of the element on the Y-axis
  • duration?: number - The duration of the transform in milliseconds
  • easing?: TransformDefinitions.EasingDefinition - The easing function to use, see TransformDefinitions.EasingDefinition

scaleXY

Scale the element on both X and Y axes.

element.scaleXY(1.2, 0.9, 1000, "easeInOut"); // Scale the element to 1.2x on X-axis and 0.9x on Y-axis in 1000ms with easeInOut ease.
  • scaleX: number - The new scale of the element on the X-axis
  • scaleY: number - The new scale of the element on the Y-axis
  • duration?: number - The duration of the transform in milliseconds
  • easing?: TransformDefinitions.EasingDefinition - The easing function to use, see TransformDefinitions.EasingDefinition

zoom

Zoom the image (recommended for image scaling).

element.zoom(2, 1000, "easeInOut"); // Zoom the image to 2x in 1000ms with easeInOut ease.
  • zoom: number - The new zoom level of the image
  • duration?: number - The duration of the transform in milliseconds
  • easing?: TransformDefinitions.EasingDefinition - The easing function to use, see TransformDefinitions.EasingDefinition

rotate

Rotate the element.

element.rotate(90, 1000, "easeInOut"); // Rotate the element to 90 degrees in 1000ms with easeInOut ease.
  • angle: number - The new angle of the element in degrees
  • duration?: number - The duration of the transform in milliseconds
  • easing?: TransformDefinitions.EasingDefinition - The easing function to use, see TransformDefinitions.EasingDefinition

opacity

Change the opacity of the element.

element.opacity(0.5, 1000, "easeInOut"); // Change the opacity of the element to 0.5 in 1000ms with easeInOut ease.
  • opacity: number - The new opacity of the element, between 0 and 1
  • duration?: number - The duration of the transform in milliseconds
  • easing?: TransformDefinitions.EasingDefinition - The easing function to use, see TransformDefinitions.EasingDefinition

Visual Effects

Visual effects map to standard CSS visual properties and can be animated like other transforms. Use them for masks, wipes, filters, blur overlays, and blend modes.

scene.action([
    image
        .mask("/masks/spotlight.png", {
            maskSize: "cover",
            maskPosition: "center",
            duration: 300,
        })
        .filter("brightness(1.2) saturate(1.1)", { duration: 300 }),
]);

effect

Apply one or more visual effect fields directly.

  • effect: TransformDefinitions.VisualEffectTransformProps - Supports maskImage, maskSize, maskPosition, maskRepeat, maskMode, clipPath, filter, backdropFilter, and mixBlendMode.
  • options?: TransformDefinitions.VisualEffectOptions - Timing options such as duration, ease, delay, and at.

mask

Apply an image mask. The source is registered for preload automatically.

  • src: ImageSrc - Mask image source.
  • options?: TransformDefinitions.MaskOptions - Mask fields plus timing options.

clearMask

Clear the current mask.

  • options?: TransformDefinitions.VisualEffectOptions - Timing options.

clip / clearClip

Apply or clear a CSS clip-path.

scene.action([
    image.clip("inset(0 0 50% 0)", { duration: 200 }),
    image.clearClip({ duration: 0 }),
]);
  • clipPath: React.CSSProperties["clipPath"] - CSS clip path value.
  • options?: TransformDefinitions.VisualEffectOptions - Timing options.

circleReveal / circleClose

Reveal or close the element with an animated circular clip-path.

  • options?: TransformDefinitions.CircleRevealOptions | TransformDefinitions.CircleCloseOptions
  • Common options: center, from, to, clearClip, duration, ease

wipe

Reveal or hide the element with a directional wipe.

  • options?: TransformDefinitions.WipeOptions
  • Common options: direction, reverse, clearClip, duration, ease

filter / clearFilter

Apply or clear a CSS filter.

  • filter: React.CSSProperties["filter"] - For example blur(4px) or brightness(0.8).
  • options?: TransformDefinitions.VisualEffectOptions - Timing options.

backdrop

Apply a CSS backdrop-filter. This is useful for glass or blur overlays.

  • backdropFilter: React.CSSProperties["backdropFilter"]
  • options?: TransformDefinitions.VisualEffectOptions - Timing options.

blend

Apply a CSS mix-blend-mode.

  • mixBlendMode: React.CSSProperties["mixBlendMode"]
  • options?: TransformDefinitions.VisualEffectOptions - Timing options.

transform

Apply a custom transform to the element.

element.transform(new Transform(
    /* Transform Definitions */
));
  • transform: Transform - The custom transform to apply to the element, see Transform

show

Overload 1 of 3

Show the element immediately.

element.show();

Overload 2 of 3

Show the element with custom transform.

element.show({
    /* Transform Definitions */
});
  • options: Transform - The custom transform to apply to the element, see Transform

Overload 3 of 3

Show the element with transform config. A transform with alpha:1 will be applied to the element.

element.show({
    duration: 1000,
    ease: "easeInOut",
});

hide

Overload 1 of 3

Hide the element immediately.

element.hide();

Overload 2 of 3

Hide the element with custom transform.

element.hide({
    /* Transform Definitions */
});
  • options: Transform - The custom transform to apply to the element, see Transform

Overload 3 of 3

Hide the element with transform config. A transform with alpha:0 will be applied to the element.

element.hide({
    duration: 1000,
    ease: "easeInOut",
});

On this page

Chainable MethodsposscalescaleXscaleYscaleXYzoomrotateopacityVisual EffectseffectmaskclearMaskclip / clearClipcircleReveal / circleClosewipefilter / clearFilterbackdropblendtransformshowOverload 1 of 3Overload 2 of 3Overload 3 of 3hideOverload 1 of 3Overload 2 of 3Overload 3 of 3