Skip to main content

Group

The Group Action runs multiple Actions simultaneously. All Actions begin at the same time. The Group Action is considered finished when the Action with the longest duration has completed.

Running two Actions as a group​

Below, we run two simultaneous Actions on the "A" label after the "GO" button is pushed:

  • A Move Action moves the label to { x: 100, y: 75 }.
  • A Scale Action scales the Action to 10 times its original size.
aLabel.run(Action.group([
    Action.move({ point: { x: 100, y: 75 }, duration: 1000 }),
    Action.scale({ scale: 10, duration: 500 }),
]));

The Move action takes 1000 milliseconds to complete, while the Scale action takes only 500 milliseconds. Thus, the total duration of the group Action is 1000 milliseconds.

Loading...
Explore:
  • How can we apply a group Action to two different nodes? For example, what if we want to move and scale two different labels, "A" and "B", at the same time? In the group Action for the "A" label, move and scale it as before. Then, add an additional Action within the group: a custom Action to move and scale the "B" label:
    aLabel.run(Action.group([
    Action.move({ point: { x: 40, y: 75 }, duration: 1000 }),
    Action.scale({ scale: 4, duration: 500 }),
    Action.custom({
        callback: () => {
            bLabel.run(Action.group([
                Action.move({ point: { x: 160, y: 75 }, duration: 1000 }),
                Action.scale({ scale: 4, duration: 500 }),
            ]));
        }
    })
]));
    Now, both labels move and scale at the same time.