Groups

A group bundles elements together so they behave as one: move the group and everything inside moves with it, rotate or scale it and the whole arrangement turns and grows around its center. It works like groups in Figma, Sketch, or Keynote. A logo with its caption, a phone with the callouts pointing at it, or a cluster of decorative shapes are typical groups.

Unlike a stack, a group doesn't lay anything out. Elements keep the exact positions you gave them, and the group just carries them around.

#Creating a Group

Select two or more elements in the same block and press CTRLG, click "Group" in the floating toolbar, or right-click and choose "Group Selection". Nothing moves: the elements stay exactly where they were, on every pane the block appears on.

The group takes the place of the topmost selected element in the layer order, and shows up in the layers list with its elements nested under it.

#Selecting Inside a Group

Clicking an element on the canvas selects its outermost group. Click again to go one level deeper - into a nested group, and then to the element itself. Once you're inside a group, clicks on its other elements stay at that level, so you can hop between siblings without drilling down again. + click adds siblings to the selection.

You can also pick any element directly in the layers list, at any depth.

#Moving and Transforming

A selected group has the same "Position & Transform" controls as any element: X/Y, Scale, and Rotate, plus the corner handles on the canvas (which scale the group). Like every element, these are per-pane values, so you can move, rotate, or scale a group on each pane and PaneFlow animates the difference - see Transitions & Morphing.

A group rotates and scales around the center of its content. PaneFlow keeps that pivot up to date as you edit what's inside, so there's no transform origin to set.

Elements inside a group can still be moved, rotated, and scaled on their own. Inside a rotated or scaled group, dragging an element or nudging it with the arrow keys follows the screen, not the group's tilted axes.

#Group Settings

A group has no look of its own, so it only has the settings that act on its content:

• "Position & Transform" - X/Y, Scale, and Rotate (no width or height - scale the group instead).
• "Animation" - an entrance or looping animation that plays on the whole group. General animation types only; elements inside keep their own animations too. See Element Animations.
• "Visual Effects" - "Opacity" and "Parallax" for everything inside.
• "On Click Action" - one action for the whole group.
• "CSS Class" - a custom class for styling in exported code.

There's no fill, border, padding, shadow, blur, or mask. If you want a background behind a set of elements, use a stack instead.

#Adding and Removing Elements

With a group selected, a new or pasted element goes into the group. With an element inside a group selected, it lands right above that element. Either way it appears where it would have appeared in the block, even if the group is moved, rotated, or scaled.

Drag elements into, out of, and between groups in the layers list. They keep their place on the canvas while they change groups. Dropping below the last element of a group, over the indentation, moves an element out to the outer level.

Delete the last element of a group and the group goes with it.

#Ungrouping

Select a group and press CTRLG, click "Ungroup" in the toolbar, or right-click and choose "Ungroup". The elements go back to the group's parent and stay where they were: the group's position, rotation, and scale on each pane are baked into each element, its opacity is multiplied into theirs, and its parallax is added to theirs. The group's own animation is dropped.

#Groups vs Stacks

Reach for a group when the arrangement is hand-placed and you just want it to travel together. Reach for a stack when the elements should line up and space themselves.

#Limits

• Only elements with the same parent can be grouped - all at the block level, or all inside the same group.
• Groups can be nested, and a group can contain stacks, but a stack can't contain a group. Groups and stacks together go at most 5 levels deep.
• Background images and background videos can't go into a group.
• Grouping and ungrouping change the block's content on every pane, so they're only available on the first pane the block appears on - just like the block's styles.

#Next

• Stacks - row and column layouts with automatic spacing
• Elements Overview - shared controls and sizing
• Keyboard Shortcuts - every shortcut in one place