Skip to main content

Scene hierarchy

Scenes are collections of nodes displayed in your animation. They're organized in a tree hierarchy, with the scene view at its root. This concept is similar to the Document Object Model used to represent HTML and XML documents.

Here's an example of a simple scene hierarchy together with its object representation:

view.add(
  <>
    <Circle />
    <Layout>
      <Rect />
      <Txt>Hi</Txt>
    </Layout>
  </>,
);

Each node is an instance of a class extending the base Node class. To make the code more readable, Motion Canvas uses a custom JSX runtime. This way, instead of instantiating the nodes ourselves, we can write an XML-like markup. Note that Motion Canvas does not use React itself, only JSX. There's no virtual DOM or reconciliation and the JSX tags are mapped directly to Node instances. These two code snippets are equivalent:

// JSX
view.add(
  <>
    <Circle />
    <Layout>
      <Rect />
      <Txt>Hi</Txt>
    </Layout>
  </>,
);
// No JSX
view.add([
  new Circle({}),
  new Layout({
    children: [
      new Rect({}),
      new Text({text: 'Hi'}),
    ],
  }),
]);

Just like with DOM, it's possible to add, remove, and rearrange nodes at any time. The Node class contains the children and parent properties that can be used to traverse the tree. But in order to modify it, it's recommended to use the following helper methods:

Node.add​

public addnode: ComponentChildren: Node

Add the given node(s) as the children of this node.

The nodes will be appended at the end of the children list.

Examples

Parameters

Node.insert​

public insertnode: ComponentChildrenindex: number = 0: Node

Insert the given node(s) at the specified index in the children list.

Examples

Parameters

Node.remove​

public remove(): Node

Remove this node from the tree.

Node.reparent​

public reparentnewParent: Node: void

Change the parent of this node while keeping the absolute transform.

After performing this operation, the node will stay in the same place visually, but its parent will be changed.

Parameters

Node.moveUp​

public moveUp(): Node

Move the node up in relation to its siblings.

The node will exchange places with the sibling right above it (if any) and from then on will be rendered on top of it.

Node.moveDown​

public moveDown(): Node

Move the node down in relation to its siblings.

The node will exchange places with the sibling right below it (if any) and from then on will be rendered under it.

Node.moveToTop​

public moveToTop(): Node

Move the node to the top in relation to its siblings.

The node will be placed at the end of the children list and from then on will be rendered on top of all of its siblings.

Node.moveToBottom​

public moveToBottom(): Node

Move the node to the bottom in relation to its siblings.

The node will be placed at the beginning of the children list and from then on will be rendered below all of its siblings.

Node.moveTo​

public moveToindex: number: Node

Move the node to the provided position relative to its siblings.

If the node is getting moved to a lower position, it will be placed below the sibling that's currently at the provided index (if any). If the node is getting moved to a higher position, it will be placed above the sibling that's currently at the provided index (if any).

Parameters

  • index: number

    The index to move the node to.

Node.moveAbove​

public moveAbovenode: NodedirectlyAbove: boolean = false: Node

Move the node above the provided node in the parent's layout.

The node will be moved above the provided node and from then on will be rendered on top of it. By default, if the node is already positioned higher than the sibling node, it will not get moved.

Parameters

  • node: Node

    The sibling node below which to move.

  • directlyAbove: boolean = false

    Whether the node should be positioned directly above the sibling. When true, will move the node even if it is already positioned above the sibling.

Node.moveBelow​

public moveBelownode: NodedirectlyBelow: boolean = false: Node

Move the node below the provided node in the parent's layout.

The node will be moved below the provided node and from then on will be rendered below it. By default, if the node is already positioned lower than the sibling node, it will not get moved.

Parameters

  • node: Node

    The sibling node below which to move.

  • directlyBelow: boolean = false

    Whether the node should be positioned directly below the sibling. When true, will move the node even if it is already positioned below the sibling.

Node.removeChildren​

public removeChildren(): void

Remove all children of this node.