SkenraAnimation

Animates an element's properties over time — the way to make a node move, scale, rotate, or recolor, following the Web Animations model.

Declarative element: <sk-animation>

Not on the sk.* global — construct via the declarative element or a module import.

Remarks

This is the driver of the SkenraAnimatable animation family: it owns the timing — how long the change takes, how many times it repeats, whether it reverses — and plays a set of keyframes that describe the property values along the way. It is placed on the element whose properties it animates, so the same timing grammar works for a node's transform, a material's color, a light's intensity, or any other animatable.

Key attributes. duration is how long one cycle lasts; iterations is how many times it repeats (Infinity loops forever); direction (alternate bounces back and forth) and easing shape the motion; begin schedules the start, either at a fixed time or synced to another animation's end (begin="other.end") for sequencing. The keyframes it plays give the property values: a keyframe at offset 0 is the start, at 1 the end, and a lone keyframe at offset 1 makes a "to" animation that interpolates from the element's own current value.

Related. Its keyframes are sk-keyframe children. Several animations on the same element compose — run them together for a parallel effect (sk-group-effect) or chain them with begin for a sequence (sk-sequence-effect). A finished animation is automatically replaced when a newer one covers the same properties, so rapid-fire animations do not accumulate.

Constructor

This constructor follows the Web Animations API Animation(effect, timeline) signature — positional, not the Skenra constructor(config?) convention — on purpose: <sk-animation> is the platform Animation interface, and matching the spec exactly is what lets WAAPI consumers and conformance tests use it interchangeably with a native Animation.

constructor(effect?: SkenraAnimationEffect | null, timeline?: SkenraAnimationTimeline | null)

Properties

Other Properties

Methods

Example

// Create effect and animation separately (composition pattern)
const effect = new SkenraKeyframeEffect(target, [
    { offset: 0, x: 0 },
    { offset: 1, x: 100 }
], { duration: 1000 });

const animation = new SkenraAnimation(effect);
animation.play();

Used in guides: Scene basics

↑ Documentation home · ← All classes