Plays several animations one after another — the SkenraAnimatable family's
way to chain property changes into a timed sequence.
JavaScript API:
SequenceEffect
A sequence effect composes child effects so each one starts after the previous
finishes: only one is active at a time, and the sequence lasts as long as all of
them end to end. It is the counterpart to a sk-group-effect — same idea of
composing effects, but chained in time rather than stacked in parallel. Use it to
choreograph steps: move, then turn, then settle.
Key attributes. The sequence carries timing that governs the chain as a whole —
its iterations repeat the entire run — while each child contributes its own
duration to the total. Order is the order of the children, and each step's start is
synced to the previous step's end (a later sk-animation's begin referencing
the earlier one's end).
Related. Its sibling sk-group-effect runs effects in parallel instead of
in sequence; both compose sk-animation effects built from sk-keyframetimelines. The example shows the concrete chained 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 sequence effect plays effects ONE AFTER ANOTHER. Declaratively, chain
<sk-animation>s with syncbase timing: each `begin="<id>.end"` starts when
the named animation finishes. Here the sphere moves right, then up, then
back, in sequence. -->
<sk-scene>
<sk-plain-material id="mat" base-color="#7fa8d8"></sk-plain-material>
<sk-sphere radius="1" segments="6">
<sk-surface-paint material="#mat"></sk-surface-paint>
<sk-animation id="step1" duration="800ms" begin="0s">
<sk-keyframe offset="0" x="-2"></sk-keyframe>
<sk-keyframe offset="1" x="2"></sk-keyframe>
</sk-animation>
<sk-animation id="step2" duration="800ms" begin="step1.end">
<sk-keyframe offset="0" y="0"></sk-keyframe>
<sk-keyframe offset="1" y="2"></sk-keyframe>
</sk-animation>
<sk-animation duration="800ms" begin="step2.end">
<sk-keyframe offset="0" x="2"></sk-keyframe>
<sk-keyframe offset="1" x="-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. |