Plays several animations one after another — the SkenraAnimatable family's
way to chain property changes into a timed sequence.
Declarative element:
<sk-sequence-effect>
Not on the sk.* global — construct via the declarative element or a module import.
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.
constructor(config?: { children?: SkenraChildEffect[]; timing?: OptionalEffectTiming })Inherited from: GroupEffect
— see those pages for inherited members.
| 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 sequential effects
const fadeIn = new SkenraKeyframeEffect(node, [{opacity: 0}, {opacity: 1}], 500);
const grow = new SkenraKeyframeEffect(node, [{scale: 1}, {scale: 1.2}], 300);
const fadeOut = new SkenraKeyframeEffect(node, [{opacity: 1}, {opacity: 0}], 500);
// Sequence them to play one after another
const sequence = new SequenceEffect({ children: [fadeIn, grow, fadeOut] });
// Create animation to drive the sequence
const animation = new SkenraAnimation(sequence);
animation.play();
// fadeIn plays 0-500ms, grow plays 500-800ms, fadeOut plays 800-1300ms