Interface PositionalTween

Tween for a positional property. from/to use Length semantics:

  • 0 -> flush against the anchored edge (e.g. for right, the node's right edge sits on the parent's right edge).
  • 1 -> one full parent dimension away from that edge inwards (for right: 1, the node's right edge sits at the parent's left edge - fully off-screen to the left).
  • -1 -> one full parent dimension away outwards (for right: -1, the node is fully off-screen right).
  • "50%" -> 50 % of the relevant dimension.
  • "40px" -> design pixels, scaled with OverlayDefinition.designWidth.

Use the object form { value, relativeTo } to place the property's edge at an absolute coordinate inside a reference node's box. relativeTo: "frame" uses the video frame; any other string is a node id. value is multiplied by the reference's dimension on the tween's axis and added to its leading edge - so the meaning of the number does not depend on which positional field is animated:

  • 0 -> reference's leading (left / top) edge.
  • 1 -> reference's trailing (right / bottom) edge.
  • -1 -> one full reference-size before the leading edge.
  • "50%" -> middle of the reference. Resolved once at tween start. Mixing a relativeTo endpoint with a plain Length endpoint leaves the plain side as "no override": it falls through to the default (from -> current edge, to -> snapshot base edge).
interface PositionalTween {
    delay?: Duration;
    duration?: Duration;
    easing?: Easing;
    from?: TweenPositionValue;
    property: PositionalProperty;
    target: string;
    to?: TweenPositionValue;
}

Hierarchy

  • BaseTween
    • PositionalTween

Properties

delay?: Duration

Default 0.

duration?: Duration

Default: fills the remaining phase time after delay.

easing?: Easing

Default "linear".

Default: the property's current value when the tween starts. If the property is not declared on the node, defaults to the value that reproduces the node's resting position (see to).

target: string

Node id to animate.

Default: the node's declared (base) value for the property. If the property is not declared on the node (e.g. animating right on a left-anchored node), it defaults to the value that lands the node at its resting position - so the tween settles visually identical to the base layout instead of snapping to 0.