Framer Classic » Layers » Layer hierarchy

Layer hierarchy

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

Layer hierarchy
Open in Framer

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
Open in Framer

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

smallLayer.parent = bigLayer
Open in Framer

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
A layer with a child layer

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.childrenAn array containing all the children of layer.
layer.childrenWithName "name"This function will return an array of layer’s children filtered by ‘name.’
layer.siblingsAn 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
Open in Framer

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

Left: the default, no clipping. Right: clipping enabled

Leave a Reply