Plays several animations together, in parallel — the SkenraAnimatable
family's way to run multiple property changes as one coordinated effect.
JavaScript API:
GroupEffect
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.
Serve these docs to run the live example.
WebGPU needs a secure context — open this page via grunt serve
rather than double-clicking the file. The Markup tab works from disk.
<!-- A group effect runs several effects in PARALLEL. Declaratively, that is
simply multiple <sk-animation> elements that start together (default
begin) — here one sphere scales while another translates, in lockstep. -->
<sk-scene>
<sk-plain-material id="mat" base-color="#7fa8d8"></sk-plain-material>
<sk-sphere x="-2" radius="1" segments="6">
<sk-surface-paint material="#mat"></sk-surface-paint>
<sk-animation duration="1000ms" iterations="Infinity" direction="alternate">
<sk-keyframe offset="0" s="1"></sk-keyframe>
<sk-keyframe offset="1" s="1.6"></sk-keyframe>
</sk-animation>
</sk-sphere>
<sk-sphere x="2" radius="1" segments="6">
<sk-surface-paint material="#mat"></sk-surface-paint>
<sk-animation duration="1000ms" iterations="Infinity" direction="alternate">
<sk-keyframe offset="0" y="0"></sk-keyframe>
<sk-keyframe offset="1" y="2"></sk-keyframe>
</sk-animation>
</sk-sphere>
</sk-scene>| Attribute | Type | Default | Description |
|---|---|---|---|
id |
<id> |
— | The element's unique identifier — the standard HTML global id attribute. |
iterations |
<iteration-count> (<number> | |
— | attribute only |
direction |
<playback-direction> ("normal" | "reverse" | "alternate" | "alternate-reverse") |
— | attribute only |
fill |
<fill-mode> ("none" | "forwards" | "backwards" | "both" | "auto") |
— | attribute only |
easing |
<easing-function> |
— | attribute only |
composite |
<composite-operation> ("replace" | "add" | "accumulate") |
— | Gets the composite operation for this effect. |