Reference
MoveAnimator
The supported way to animate from TypeScript — sequencing phases, reacting to a server response, driving a node the template does not own, View Transitions.
Overview
The supported way to animate from TypeScript — sequencing phases, reacting to a server
response, driving a node the template does not own, View Transitions. For a trigger
relationship between two elements in a template, see moveTarget / moveTrigger.
Resolution order matches the directives exactly: MOVEMENT_CONFIG defaults, then the options
passed here, then the reduced-motion override. animate() returns null when nothing was
scheduled — on the server, or when motion is disabled — in which case the final styles have
still been applied (except for pseudo-elements, which have none).
readonly #animator = inject(MoveAnimator);
readonly panel = viewChild.required<ElementRef<HTMLElement>>('panel');
async reveal() {
await this.#animator.animate(this.panel(), { opacity: [0, 1], y: [20, 0] }, { duration: '400ms' })
?.finished;
}
finished always resolves — also when the animation is cancelled — so sequencing needs no
try/catch (see AnimationControls).
Stable API — covered by semantic-versioning guarantees.
- Kind: Service
- Provided in:
root - Stability:
stable
Public methods
animate
animate(target: MoveAnimationTarget, keyframes: MoveKeyframes, options?: MoveAnimateOptions): AnimationControls | null
| Parameter | Type | Optional | Description |
|---|---|---|---|
target |
MoveAnimationTarget |
||
keyframes |
MoveKeyframes |
||
options |
MoveAnimateOptions |
Yes |
set
set(target: MoveAnimationTarget, state: MoveKeyframeState): void
Commits a state instantly, through the same style composition the directives use — so x,
scale, blur and friends land on the right channels and compose with an existing
transform, instead of hand-writing style.transform.
Cancels the target's in-flight engine animation first, so a finishing animation cannot overwrite the state afterwards. A no-op on the server.
animator.set(overlay, { opacity: 0, clipPath: 'circle(0px at 50% 50%)' });
| Parameter | Type | Optional | Description |
|---|---|---|---|
target |
MoveAnimationTarget |
||
state |
MoveKeyframeState |
clear
clear(target: MoveAnimationTarget, properties?: readonly string[]): void
Removes styles the library wrote inline, returning the element to its stylesheet state.
With properties, only those keyframe keys are cleared (['opacity', 'y']; transform
shorthands clear the channel they wrote). Without, the library's common channels are cleared:
opacity, translate, scale, rotate, transform and filter. Cancels the target's in-flight engine
animation first. A no-op on the server.
| Parameter | Type | Optional | Description |
|---|---|---|---|
target |
MoveAnimationTarget |
||
properties |
readonly string[] |
Yes |