Skip to main content

Positioning

Motion Canvas uses a Cartesian coordinate system. Its origin is located in the center of the scene, with the x-axis going to the right and the y-axis going down.

Transform​

All nodes are positioned relative to their parents. This means that any transformations applied to the parent are also applied to its children. The transform of each node consists of the following properties:

Node.position​

readonly public position: Vector2SignalNode

Represents the position of this node in local space of its parent.

Examples

Node.scale​

readonly public scale: Vector2SignalNode

Represents the scale of this node in local space of its parent.

Examples

Node.rotation​

readonly public rotation: SimpleSignalnumberNode

Represents the rotation (in degrees) of this node relative to its parent.

Absolute transform​

Each of the basic transform properties has a dedicated helper method that operates in world space.

This can be helpful, for instance, when we need to match the transforms of two nodes located within different parents. Consider the following example:

const circleA = createRef<Node>();
const circleB = createRef<Node>();

view.add(
  <>
    <Node position={[200, 100]}>
      <Circle
        position={[0, 100]}
        ref={circleA}
        width={20}
        height={20}
        fill={'white'}
      />
    </Node>
    <Circle ref={circleB} width={10} height={10} fill={'red'} />
  </>,
);

circleB().absolutePosition(circleA().absolutePosition());

We access the absolute position (position in world space) of circleA and assign it as the absolute position of circleB. This will move the circleB right on top of circleA.

info

Note that we still need to set the absolutePosition of circleB and not just the position. It may seem redundant since circleB is a direct child of the scene view. But the local space of the scene view is not the same as the world space.

All available world-space properties are listed below:

Node.absolutePosition​

readonly public absolutePosition: SimpleVector2SignalNode

A helper signal for operating on the position in world space.

Retrieving the position using this signal returns the position in world space. Similarly, setting the position using this signal transforms the new value to local space.

If the new value is a function, the position of this node will be continuously updated to always match the position returned by the function. This can be useful to "pin" the node in a specific place or to make it follow another node's position.

Unlike position, this signal is not compound - it doesn't contain separate signals for the x and y components.

Node.absoluteScale​

readonly public absoluteScale: SimpleVector2SignalNode

A helper signal for operating on the scale in world space.

Retrieving the scale using this signal returns the scale in world space. Similarly, setting the scale using this signal transforms the new value to local space.

If the new value is a function, the scale of this node will be continuously updated to always match the position returned by the function.

Unlike scale, this signal is not compound - it doesn't contain separate signals for the x and y components.

Node.absoluteRotation​

readonly public absoluteRotation: SimpleSignalnumberNode

A helper signal for operating on the rotation in world space.

Retrieving the rotation using this signal returns the rotation in world space. Similarly, setting the rotation using this signal transforms the new value to local space.

If the new value is a function, the rotation of this node will be continuously updated to always match the rotation returned by the function.

Matrices​

For more advanced uses, nodes expose all the matrices necessary to map vectors from one space to another. For example, the helper properties described above could be reimplemented using the worldToParent and localToWorld matrices:

// getting the absolute position:
node.absolutePosition();
// same as:
Vector2.zero.transformAsPoint(node.localToWorld());

// setting the absolute position:
node.absolutePosition(vector);
// same as:
node.position(vector.transformAsPoint(node.worldToParent()));

The available matrices include:

Node.localToWorld​

public localToWorld(): DOMMatrix

Get the local-to-world matrix for this node.

This matrix transforms vectors from local space of this node to world space.

Examples

Node.worldToLocal​

public worldToLocal(): DOMMatrix

Get the world-to-local matrix for this node.

This matrix transforms vectors from world space to local space of this node.

Examples

Node.localToParent​

public localToParent(): DOMMatrix

Get the local-to-parent matrix for this node.

This matrix transforms vectors from local space of this node to local space of this node's parent.

Node.parentToWorld​

public parentToWorld(): DOMMatrix

Get the parent-to-world matrix for this node.

This matrix transforms vectors from local space of this node's parent to world space.

Node.worldToParent​

public worldToParent(): DOMMatrix

Get the world-to-parent matrix for this node.

This matrix transforms vectors from world space to local space of this node's parent.