Plays several animations together, in parallel — the SkenraAnimatable
family's way to run multiple property changes as one coordinated effect.
Declarative element:
<sk-group-effect>
Not on the sk.* global — construct via the declarative element or a module import.
A group effect composes child effects so they all play simultaneously, sharing one clock: they start together and are evaluated at the same local time, and the group lasts as long as its longest child. This is how you make several things happen at once — a shape that scales while it moves, or two objects animating in lockstep.
Key attributes. The group carries the shared timing — one duration,
iterations, and direction that govern every child together, so the whole group
loops or reverses as a unit. Each child keeps its own keyframes and target: several
sk-animation effects that start together compose into one parallel group.
Related. Its sibling sk-sequence-effect plays effects one after another
instead of together; both compose effects built from sk-keyframe timelines on
one or more sk-animations. The example shows the concrete parallel form.
constructor(config?: { children?: SkenraChildEffect[]; timing?: OptionalEffectTiming })| Property | Type | Default | Description | Declared by |
|---|---|---|---|---|
childrenconfig-only |
SkenraChildEffect[] |
— | The child effects to compose in parallel. | GroupEffectConfig |
timingconfig-only |
OptionalEffectTiming |
— | Optional group timing. | GroupEffectConfig |
| Property | Type | Default | Description | Declared by |
|---|---|---|---|---|
childEffectsread-only |
SkenraChildEffect[] |
— | Gets the child effects in this group. | GroupEffect |
targetread-only |
SkenraAnimatable | null |
— | Gets the target of this effect (always null for groups). | GroupEffect |
composite |
CompositeOperation |
— | Gets the composite operation for this effect. | GroupEffect |
iterationComposite |
IterationCompositeOperation |
— | Gets the iteration composite operation for this effect. | GroupEffect |
| Method | Description | Declared by |
|---|---|---|
appendEffect(child: SkenraChildEffect): GroupEffect |
Adds a child effect to the group. | GroupEffect |
prependEffect(child: SkenraChildEffect): GroupEffect |
Prepends a child effect to the group. | GroupEffect |
removeEffect(child: SkenraChildEffect): boolean |
Removes a child effect from the group. | GroupEffect |
getKeyframes(): any[] |
Gets keyframes from all children (for compatibility). | GroupEffect |
setKeyframes(_keyframes: any[]): void |
Sets keyframes is not supported for GroupEffect. | GroupEffect |
// Create parallel effects
const fadeEffect = new SkenraKeyframeEffect(node1, [{opacity: 0}, {opacity: 1}], 1000);
const slideEffect = new SkenraKeyframeEffect(node2, [{y: 100}, {y: 0}], 800);
// Group them to evaluate in parallel
const group = new GroupEffect({ children: [fadeEffect, slideEffect] });
// Create animation to drive the group
const animation = new SkenraAnimation(group);
animation.play();