MoveTriggerDirective

Overview

Plays keyframes on its host when a boolean flips to true, and resets when it flips back — the declarative trigger side of moveTarget/moveTrigger.

<div [moveTrigger]="open()" [moveFrames]="{ opacity: [0, 1] }"></div>

It also exposes an imperative handle. A bare moveTrigger attribute means imperative only — no declarative trigger, no frames required:

<div #overlay="moveTrigger" moveTrigger></div>

await overlay.play({ opacity: [0, 1] }, { duration: '180ms' });

For animation driven entirely from TypeScript, prefer MoveAnimator — it needs no template element at all and supports pseudo-elements.

Experimental API — may change significantly between minor versions.

• Kind: Directive
• Export as: moveTrigger
• Stability: experimental

Selector

[moveTrigger]

Inputs

Input	Type	Default	Required	Description
moveTrigger	unknown	undefined		true plays moveFrames, false resets. A bare attribute (<div moveTrigger>) or no value leaves the directive in imperative-only mode: nothing plays until play() is called. Transform (inline function); reads as boolean | undefined.
moveFrames	MoveKeyframes | undefined	undefined		Keyframes the declarative trigger plays, and the default for play() without frames.
moveResetFrames	MoveKeyframes | undefined	undefined
moveResetState	"initial" | "final" | "clear"	'clear'
moveDuration	unknown	undefined		Transform optionalTimeAttribute('moveDuration'); reads as number | undefined.
moveEasing	string | undefined	undefined
moveDelay	unknown	undefined		Transform optionalTimeAttribute('moveDelay'); reads as number | undefined.
moveSpring	MoveSpring | undefined	undefined
moveDisabled	unknown	undefined		Transform optionalBooleanAttribute; reads as boolean | undefined.
moveReverseDuration	unknown	undefined		Transform optionalTimeAttribute('moveReverseDuration'); reads as number | undefined.
moveReverseEasing	string | undefined	undefined

Public methods

play

play(frames?: MoveKeyframes, options?: MoveAnimateOptions): Promise<void>

Plays frames (or moveFrames) on the host, cancelling whatever this directive was playing.

options apply to this call only — no need to mutate inputs to play two phases with different timing. Resolution order: MOVEMENT_CONFIG → this directive's inputs → options → reduced motion.

The promise always resolves, never rejects: when the animation finishes, and also when it is cancelled (a second play(), reset(), destroy). Code after await always runs.

Parameter	Type	Optional	Description
frames	MoveKeyframes	Yes
options	MoveAnimateOptions	Yes

reset

reset(): void

Cancels the current animation and restores the host per moveResetState.

set

set(state: MoveKeyframeState): void

Parameter	Type	Optional	Description
state	MoveKeyframeState

Related types

• MoveAnimateOptions
• MoveKeyframeState
• MoveKeyframes
• MoveSpring