The base concept for animation & effects: driving an element's properties over time.
Base class — has no declarative element of its own; subclasses inherit its members.
Almost everything in a Skenra scene is animatable — nodes, materials, paints, fields — meaning its properties can change over time. Animation follows the Web Animations model: a set of keyframes and timing (duration, iterations, direction, easing) drive an element's properties, with each keyframe setting the values at its offset.
Member elements. sk-animation is a timed keyframe track that targets
the element it belongs to; sk-keyframe is one keyframe of that track.
sk-keyframe-effect bundles a target, keyframes, and timing into a
reusable effect; sk-group-effect runs several effects in parallel and
sk-sequence-effect runs them one after another.
The example bobs a sphere up and down forever with a two-keyframe animation.
Abstract base class — not instantiated directly. Construct one of its concrete subclasses; this class contributes the members below to them.
| Property | Type | Default | Description | Declared by |
|---|---|---|---|---|
sceneread-only |
any |
— | Gets the Scene this animatable belongs to, if any. | SkenraAnimatable |
animationsread-only |
SkenraAnimation[] |
— | Public getter for the animations affecting this target. | SkenraAnimatable |
| Method | Description | Declared by |
|---|---|---|
animate(firstArg: TypedKeyframe<this>[] | TypedPropertyIndexedKeyframes<this> | Record<string, any> | globalThis.Keyframe[] | globalThis.PropertyIndexedKeyframes | null, secondArg?: number | KeyframeAnimationOptions | globalThis.KeyframeAnimationOptions): SkenraAnimation & Animation |
Creates a new SkenraAnimation for this target per Web Animations API. | SkenraAnimatable |
removeAnimation(animation: SkenraAnimation): boolean |
Removes a specific animation from this object. | SkenraAnimatable |
constrain(type: K, config: ConstraintConfigMap[K]): ConstraintReturnMap[K] |
Creates a constraint on this Animatable using a fluent API. | SkenraAnimatable |
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.
<sk-scene>
<sk-plain-material id="mat" base-color="#7fa8d8"></sk-plain-material>
<sk-sphere radius="1">
<sk-surface-paint material="#mat"></sk-surface-paint>
<sk-animation duration="1500ms" 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>