Skip to main content

Groups

A Group collects multiple objects into a single object that includes them all. Its children are positioned using local coordinates relative to the group's top-left corner; and the group can then be positioned, scaled, rotated, skewed, or faded as one object.

import { Anchor, Group } from "presenter";

const card = Group([background, title, icon], {
  x: 1920,
  y: 1080,
  width: 1200,
  height: 700,
  anchor: Anchor.CENTER,
});

Always set the group's width and height when positioning it. Presenter.js uses those dimensions to calculate anchors and transformations. The dimensions do not automatically come from the children.

Add only the group to the slide's top-level objects array; its children render as part of the group. Keep references to the children if you also want to animate them independently.

import { Anchor, Animate, Easing, Group, Slide } from "presenter";
const card = Group([cardBackground, cardTitle, cardBody], {  x: 1250,  y: 1080,  width: 1300,  height: 720,  anchor: Anchor.CENTER,});
const slide = Slide({  objects: [card],  animations: [    Animate(      card,      {        x: 2550,        opacity: 0.5,        rotation: 18,        scale: 1.4,      },      { easing: Easing.CUBIC },    ),  ],});

Useful group properties include:

  • x, y, and anchor for positioning
  • scale for sizing (or scaleX, and scaleY for sizing in just one dimension)
  • rotation for degrees of rotation
  • skewX and skewY for applying a skew transform to the group
  • opacity for fading the group and all descendants

When debugging a group's layout and animations, it can be helpful to set the group's previewColor to see the group's bounds.