Scene hierarchy

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

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

                                
                                  
                                    view
                                    .
                                    add
                                    (
                                    
                                    

                                  
                                  
                                    
                                    <
                                    >
                                    
                                    

                                  
                                  
                                    
                                    <
                                    Circle
                                    
                                    />
                                    
                                    

                                  
                                  
                                    
                                    <
                                    Layout
                                    >
                                    
                                    

                                  
                                  
                                    
                                    <
                                    Rect
                                    
                                    />
                                    
                                    

                                  
                                  
                                    
                                    <
                                    Txt
                                    >
                                    Hi
                                    
                                    Txt
                                    >
                                    
                                    

                                  
                                  
                                    
                                    
                                    Layout
                                    >
                                    
                                    

                                  
                                  
                                    
                                    
                                    >
                                    ,
                                    
                                    

                                  
                                  
                                    
                                    )
                                    ;
                                    
                                  
                                
                              

Each node is an instance of a class extending the base Node class. Tomake the code more readable, Motion Canvas uses a custom JSX runtime. This way, insteadof instantiating the nodes ourselves, we can write an XML-like markup. Note thatMotion Canvas does not use React itself, only JSX. There's no virtual DOM orreconciliation and the JSX tags are mapped directly to Node instances. These twocode 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 anytime. The Node class contains the children and parent properties that can be used totraverse the tree. But in order to modify it, it's recommended to use thefollowing helper methods:

Node.add

                            
                              
                                public 
                                add
                                
                                  
                                    
                                      node
                                      : 
                                      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 : ComponentChildren

  A node or an array of nodes to append.

---

Node.insert

                            
                              
                                public 
                                insert
                                
                                  
                                    
                                      node
                                      : 
                                      ComponentChildren
                                    
                                    
                                      index
                                      : 
                                      number
                                       = 
                                      0
                                    
                                  
                                
                                : 
                                Node
                              
                              

                            
                          

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

Examples

Parameters

• node : ComponentChildren

  A node or an array of nodes to insert.

• index : number = 0

  An index at which to insert the node(s).

---

Node.remove

                            
                              
                                public 
                                remove
                                (): 
                                Node
                              
                              

                            
                          

Remove this node from the tree.

---

Node.reparent

                            
                              
                                public 
                                reparent
                                
                                  
                                    
                                      newParent
                                      : 
                                      Node
                                    
                                  
                                
                                : 
                                void
                              
                              

                            
                          

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

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

Parameters

• newParent : Node

  The new parent of this node.

---

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) andfrom 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) andfrom 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 onwill 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 thenon will be rendered below all of its siblings.

---

Node.moveTo

                            
                              
                                public 
                                moveTo
                                
                                  
                                    
                                      index
                                      : 
                                      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 belowthe sibling that's currently at the provided index (if any).If the node is getting moved to a higher position, it will be placed abovethe sibling that's currently at the provided index (if any).

Parameters

• index : number

  The index to move the node to.

---

Node.moveAbove

                            
                              
                                public 
                                moveAbove
                                
                                  
                                    
                                      node
                                      : 
                                      Node
                                    
                                    
                                      directlyAbove
                                      : 
                                      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 berendered on top of it. By default, if the node is already positionedhigher 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 thesibling. When true, will move the node even if it isalready positioned above the sibling.

---

Node.moveBelow

                            
                              
                                public 
                                moveBelow
                                
                                  
                                    
                                      node
                                      : 
                                      Node
                                    
                                    
                                      directlyBelow
                                      : 
                                      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 berendered below it. By default, if the node is already positioned lower thanthe 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 belowthe sibling. When true, will move the node even ifit is already positioned below the sibling.

---

Node.removeChildren

                            
                              
                                public 
                                removeChildren
                                (): 
                                void
                              
                              

                            
                          

Remove all children of this node.

---