Documentation
Core
Elements
Displayable

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

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