Adding and Using Group Layers
Learn how to group layers so you can move, size, align and animate them together.
Table of Contents
What Are Group Layers?
Groups are a special type of layer that allow you to combine multiple layers by nesting them inside the group. This in turn:
- Enables you to easily move multiple layers on your canvas as though they were a single layer.
- Allows you to position & align layers relative to the group’s constrained area.
- Facilitates animating the group as a whole. For example, sliding all the group’s layers in from the side of the module at once.
- Helps you to organize your timeline.
Adding Group Layers
To add a new Group layer go to Add Layer on the top bar, and click the Group item in the dropdown:
You will see the group layer appear as a blue placeholder rectangle on the canvas, with its name in the header bar running across its top:
Adding Content to Groups
A group is only useful once it has content layers nested inside it. Layers can be moved inside a group in two ways, either using the canvas or the timeline.
To move content into a group using the timeline, drag its layer and drop it just below the group layer you want to nest it in:
To move the content using the canvas, drag it and hover over the group you want to move it into. When you see the group highlight with a thickened border, drop the layer and it will move into that group:
Position and Size Content
Once content layers have been nested inside a group they can be positioned and sized relative to the bounds of that group, as opposed to the layer area or module bounds.
Grouped Layer Position
The group pictured below contains three images, set to align top left, middle center and bottom right, respectively. Note how their alignment is relative to the group bounds:
If a grouped layer has its X and Y positions changed, it will also be offset relative to the group bounds. For example, here both corners have their X and Y positions set to
20px, and this have offset them
20px from the corners of the group:
Grouped Layer Size
If you use percentage(
%) values to size a grouped layer, that size will also be relative to the group bounds. For example, here is a grouped image layer set to
You can also set a percentage(
%) value above
100% to make a layer protrude outside the voice of the group. For example, here the same image is set to
There are two ways to resize a Group layer.
The first way is if you want grouped layers to scale along with the group size, regardless of whether their size is set with percentage(
%) values. If so, select the group, then click and drag the bottom right corner handle of the group on the canvas:
The second way is if you only want to change the size of the group bounds, without altering the size of any grouped layer. In this case, instead click and drag a handle on one of the horizontal or vertical edges of the group:
Or alternatively, directly enter your desired dimensions into the Group layer’s width and height options.
Note: If you use the second method, layers with percentage(
%) based sizes will still have their size affected.
Group Header Path
The group header contains a path that helps you accurately select either the group itself or layers within it. When you hover over a group, the header path displays the layer that will be selected if you click.
For example, here a nested image is being hovered over, so the header path shows first the name of the group layer, then the image layer:
Clicking the mouse would then select that image.
However if an empty space in the group is hovered over, only the group layer name shows in the header path:
Clicking the mouse would then instead select the group layer itself.
To move a group, and hence also all its nested layers, select the group then click and drag it by its blue header bar:
You can also click and drag the group by any empty space in that group. However if you accidentally click and drag on a nested layer you may drag it out of the group. For that reason, dragging the group by its header is generally the easiest way.
Apply Animation to Group
When you add an animation to a Group layer it will be applied uniformly to all the layers nested inside the group.
For example, here we have a group containing a headline, some text, and an image. The group has had the “Long Slide from Left” preset applied as its IN animation, and as a result the entire group slides in from the left of the module:
If you add new layers to the group, they will automatically have this animation applied to them as well.
Additionally, each grouped layer can still have its own individual animations as well. For example, here the layers have staggered one second fade-in animations that can begin even as the group level animation is still going: