Layers » Layer hierarchy

Layer hierarchy

You can place layers inside other layers. This way you can group layers and animate them simultaneously.

The layer containing other layers is known as the ‘parent,’ and the layers inside it are, naturally, the ‘children.’ (In older projects you might still see the terms ‘superlayer’ and ‘sublayers.’)

It’s important to remember that a child will be positioned in its parent’s coordinate system.

This means that a child’s x: 10 and y: 10 doesn’t mean that it’s ten by ten points from the top left of the screen. It will be ten points from the top left corner of its parent layer.

There are a few different ways to place a layer inside another layer. Take these two layers:

bigLayer = new Layer
    size: 300, borderRadius: 30
    backgroundColor: "#28AFFA"
    point: Align.center
smallLayer = new Layer
    size: 100, borderRadius: 10
    backgroundColor: "#7DDD11"
    point: 20

You can create a relationship by calling the addChild() function on the parent…

bigLayer.addChild smallLayer

…or by setting the parent property on the child layer.

smallLayer.parent = bigLayer

But the easiest way is to set a layer’s parent when creating it.

bigLayer = new Layer
    size: 300, borderRadius: 30
    backgroundColor: "#28AFFA"
    point: Align.center
smallLayer = new Layer
    size: 100, borderRadius: 10
    backgroundColor: "#7DDD11"
    point: 20
    parent: bigLayer

To lift a child out of its parent, use removeChild()…

bigLayer.removeChild smallLayer

…or simply set the child layer’s parent to null.

smallLayer.parent = null

There are properties and functions for selecting child layers. You can use them to loop through a set of children (e.g., to change properties on all of them).

`layer.children`	An array containing all the children of `layer`.
`layer.childrenWithName "name"`	This function will return an array of `layer`’s children filtered by ‘`name`.’
`layer.siblings`	An array of the layers that have the same parent as `layer`.
`layer.siblingsWithName "name"`	This function will return an array of the layers that have the same parent as `layer`, filtered by ‘`name`’.

An example use could be:

# Shrink all layers in ‘parentLayer’
for layer in parentLayer.children
    layer.scale = 0.5

Note: You can still get the absolute position of a child. Every layer has a screenFrame with its current x, y, width, and height values on the screen. This means that a child’s x and y in the screen’s coordinate system will be in layer.screenFrame.x and layer.screenFrame.y.

Hierarchy is set automatically in Design. A small layer will by default be the child of a bigger layer encompassing it, but you can change this hierarchy by dragging the layers in the Layer Panel.

Masking

By default, child layers are not masked and can be visible outside of a parent layer’s borders. You change this by setting the parent’s clip property to yes.

bigLayer = new Layer
    size: 300, borderRadius: 30
    backgroundColor: "#28AFFA"
    point: Align.center
smallLayer = new Layer
    size: 150, borderRadius: 30
    backgroundColor: "#7DDD11"
    point: 200
    parent: bigLayer
bigLayer.clip = yes

Masking is a bit hidden in Design: right-click a layer to set its ‘Clip.’