Displayable

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 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

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

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

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 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 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

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

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.

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

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

Clear the current mask.

• options?: TransformDefinitions.VisualEffectOptions - Timing options.

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.

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

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

Reveal or hide the element with a directional wipe.

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

Apply or clear a CSS filter.

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

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

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

Apply a CSS mix-blend-mode.

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

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

Play a transform on the element over and over until something stops it.

The line does not wait. That is the one difference from transform(): transform() is a step of the story and the next line waits for it to finish, while loop() is a property the element carries — it is set, the story moves on, and the motion keeps running underneath everything that follows.

An element carries one transform at a time, so anything else applied to it takes the element back: transform(), pos(), zoom(), show(), hide() and the rest all end the loop and move on from wherever it had got to. What does not end it: the player skipping or fast-forwarding, a transition changing the picture, changing scene, or saving and loading — a loaded save puts the loop back.

The pose the element had when the loop started is what it returns to, and the only thing a save records; the frames in between are never written down.

const breathe = Transform.create()
    .scaleY(1.015)
    .commit({ duration: 1900, ease: "easeInOut" });

scene.action([
    yuko.loop(breathe, { repeatType: "mirror" }),
    yuko.say`It's quiet today.`,     // plays while she keeps breathing
    yuko.stopLoop({ duration: 300 }),
]);

• transform: Transform - The motion to repeat, see Transform. It has to be committed, exactly as for transform(). For anything that should not snap on each repeat, either bring it back to where it started or pass repeatType: "mirror".
• options?: LoopOptions - How the repeat behaves.
  • repeatType?: "loop" | "reverse" | "mirror" - Default "loop".
  • repeatDelay?: number - Milliseconds to hold the last pose before the next repeat starts. Default 0.

End the element's looping transform and put it back to the pose it had before the loop started.

Unlike loop(), this is something the line waits for — there is a definite end to wait for. With no duration the element is back in place on the same frame. It is a no-op on an element that is not looping.

yuko.stopLoop({ duration: 300, ease: "easeOut" });

• options?: LoopStopOptions - How the element eases out of the loop.
  • duration?: number - Milliseconds spent returning to the pose the element had before the loop started. Default 0.
  • ease?: EasingDefinition - See Transform.

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",
});

• options: Partial<TransformDefinitions.CommonTransformProps> - See TransformDefinitions.CommonTransformProps

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",
});

• options: Partial<TransformDefinitions.CommonTransformProps> - See TransformDefinitions.CommonTransformProps