angular-movement 0.1.0 → 0.3.0

package/fesm2022/angular-movement.mjs

@@ -51,6 +51,9 @@ function getInterpolated(arr, i1, i2, p) {
         return undefined;
     const v1 = arr[Math.min(i1, arr.length - 1)];
     const v2 = arr[Math.min(i2, arr.length - 1)];
+    if (typeof v1 === 'string' || typeof v2 === 'string') {
+        return p >= 1 ? v2 : v1;
+    }
     return v1 + (v2 - v1) * p;
 }
 const KNOWN_KEYS = new Set([
@@ -69,36 +72,36 @@ function buildKeyframe(frames, getVal) {
     const keyframe = {};
     const opacity = getVal(frames.opacity);
     if (opacity !== undefined) {
-        keyframe.opacity = opacity;
+        keyframe.opacity = Number(opacity);
     }
     const x = getVal(frames.x);
     const y = getVal(frames.y);
     if (x !== undefined || y !== undefined) {
-        keyframe.translate = `${x ?? 0}px ${y ?? 0}px`;
+        keyframe.translate = `${Number(x ?? 0)}px ${Number(y ?? 0)}px`;
     }
     const scale = getVal(frames.scale);
     if (scale !== undefined) {
-        keyframe.scale = `${scale}`;
+        keyframe.scale = `${Number(scale)}`;
     }
     else {
         const scaleX = getVal(frames.scaleX);
         const scaleY = getVal(frames.scaleY);
         if (scaleX !== undefined || scaleY !== undefined) {
-            keyframe.scale = `${scaleX ?? 1} ${scaleY ?? 1}`;
+            keyframe.scale = `${Number(scaleX ?? 1)} ${Number(scaleY ?? 1)}`;
         }
     }
     const rotate = getVal(frames.rotate);
     if (rotate !== undefined) {
-        keyframe.rotate = `${rotate}deg`;
+        keyframe.rotate = `${Number(rotate)}deg`;
     }
     const blur = getVal(frames.blur);
     if (blur !== undefined) {
-        keyframe.filter = `blur(${blur}px)`;
+        keyframe.filter = `blur(${Number(blur)}px)`;
     }
     const rotateX = getVal(frames.rotateX);
     const rotateY = getVal(frames.rotateY);
     if (rotateX !== undefined || rotateY !== undefined) {
-        keyframe.transform = `perspective(${DEFAULT_PERSPECTIVE}) rotateX(${rotateX ?? 0}deg) rotateY(${rotateY ?? 0}deg)`;
+        keyframe.transform = `perspective(${DEFAULT_PERSPECTIVE}) rotateX(${Number(rotateX ?? 0)}deg) rotateY(${Number(rotateY ?? 0)}deg)`;
     }
     // Passthrough arbitrary properties for WAAPI (e.g. strokeDashoffset)
     for (const key in frames) {
@@ -310,6 +313,20 @@ const MOVE_PRESETS = {
         enter: { opacity: [0, 1], x: [-100, 0], rotate: [-120, 0] },
         leave: { opacity: [1, 0], x: [0, 100], rotate: [0, 120] },
     },
+    'icon-draw': {
+        enter: { pathLength: [0, 1], opacity: [0, 1] },
+        leave: { pathLength: [1, 0], opacity: [1, 0] },
+    },
+    'icon-pulse': {
+        enter: { scale: [1, 1.08, 1], opacity: [1, 0.85, 1] },
+        leave: { scale: [1, 0.92, 1], opacity: [1, 1, 1] },
+        loop: { scale: [1, 1.08, 1], opacity: [1, 0.85, 1] },
+    },
+    'icon-bounce': {
+        enter: { y: [0, -3, 0], opacity: [1, 1, 1] },
+        leave: { y: [0, 0, 0], opacity: [1, 1, 1] },
+        loop: { y: [0, -3, 0] },
+    },
     none: {
         enter: { opacity: [1, 1] },
         leave: { opacity: [1, 1] },
@@ -449,7 +466,9 @@ class WaapiPlayer {
             onDone?.();
             return;
         }
-        const keyframes = this.#toWAAPIKeyframes(frames);
+        const keyframes = Array.isArray(frames)
+            ? frames
+            : this.#toWAAPIKeyframes(frames);
         const iterations = config.iterations ?? 1;
         this.#animation = host.animate(keyframes, {
             duration: config.duration,
@@ -638,25 +657,127 @@ class SpringPlayer {
     }
 }
 
+function isPropertyTransition(value) {
+    return (typeof value === 'object' &&
+        value !== null &&
+        ('duration' in value || 'easing' in value || 'delay' in value));
+}
+function composeTransitionKeyframes(frames, transition, baseConfig) {
+    const globalDuration = transition.duration ?? baseConfig.duration;
+    const globalEasing = transition.easing ?? baseConfig.easing;
+    const globalDelay = transition.delay ?? baseConfig.delay;
+    const propNames = Object.keys(frames).filter((k) => k !== 'transition');
+    if (propNames.length === 0)
+        return null;
+    const timings = propNames.map((prop) => {
+        const pt = transition[prop];
+        const parsed = isPropertyTransition(pt) ? pt : {};
+        return {
+            prop,
+            duration: parsed.duration ?? globalDuration,
+            easing: parsed.easing ?? globalEasing,
+            delay: parsed.delay ?? globalDelay,
+            values: frames[prop].map((v) => Number(v)),
+        };
+    });
+    const allSame = timings.every((t) => t.duration === timings[0].duration &&
+        t.easing === timings[0].easing &&
+        t.delay === timings[0].delay);
+    if (allSame) {
+        return null;
+    }
+    const uniqueEasings = new Set(timings.map((t) => t.easing));
+    let finalEasing = timings[0].easing;
+    if (uniqueEasings.size > 1) {
+        if (typeof ngDevMode !== 'undefined' && ngDevMode) {
+            console.warn('[Movement] Per-property easing differences are not supported yet. Using global easing.');
+        }
+        finalEasing = globalEasing;
+    }
+    const totalDuration = Math.max(...timings.map((t) => t.delay + t.duration));
+    const totalDelay = Math.min(...timings.map((t) => t.delay));
+    // Collect all keyframe times
+    const timeSet = new Set();
+    for (const t of timings) {
+        const n = t.values.length;
+        for (let i = 0; i < n; i++) {
+            const time = t.delay + (t.duration * i) / Math.max(1, n - 1);
+            timeSet.add(time);
+        }
+    }
+    const sortedTimes = Array.from(timeSet).sort((a, b) => a - b);
+    const resultKeyframes = [];
+    for (const time of sortedTimes) {
+        const offset = totalDuration > totalDelay ? (time - totalDelay) / (totalDuration - totalDelay) : 0;
+        const kf = { offset };
+        for (const t of timings) {
+            const localTime = time - t.delay;
+            const n = t.values.length;
+            if (n === 1) {
+                kf[t.prop] = t.values[0];
+                continue;
+            }
+            if (localTime <= 0) {
+                kf[t.prop] = t.values[0];
+            }
+            else if (localTime >= t.duration) {
+                kf[t.prop] = t.values[n - 1];
+            }
+            else {
+                const progress = t.duration > 0 ? localTime / t.duration : 0;
+                const maxIdx = n - 1;
+                const idx = progress * maxIdx;
+                const i1 = Math.floor(idx);
+                const i2 = Math.min(Math.ceil(idx), maxIdx);
+                const p = idx - i1;
+                const v1 = t.values[i1];
+                const v2 = t.values[i2];
+                kf[t.prop] = v1 + (v2 - v1) * p;
+            }
+        }
+        resultKeyframes.push(kf);
+    }
+    return {
+        keyframes: resultKeyframes,
+        duration: totalDuration,
+        easing: finalEasing,
+        delay: totalDelay,
+    };
+}
+
 class AnimationEngine {
     #platformId = inject(PLATFORM_ID);
     #defaults = inject(MOVEMENT_CONFIG);
-    play(host, frames, options = {}) {
+    play(host, rawFrames, options = {}) {
         if (!isPlatformBrowser(this.#platformId)) {
             options.onDone?.();
             return null;
         }
+        const frames = this.#resolveSvgFrames(host, rawFrames);
         if (options.disabled) {
-            this.#prepareSvgStrokeDraw(host, frames);
+            this.#prepareSvgPathDraw(host, frames);
             this.#applyFinalStyles(host, frames);
             options.onDone?.();
             return null;
         }
-        this.#prepareSvgStrokeDraw(host, frames);
+        this.#prepareSvgPathDraw(host, frames);
         const config = options.config ?? this.#defaults;
         const spring = validateSpring(options.spring);
         const isSpring = spring || config.easing === 'spring';
         const iterations = options.iterations ?? config.iterations;
+        // Per-property transitions only supported with WaapiPlayer (not spring)
+        if (options.transition && !isSpring) {
+            const resolved = composeTransitionKeyframes(frames, options.transition, config);
+            if (resolved) {
+                return new WaapiPlayer(host, resolved.keyframes, {
+                    duration: resolved.duration,
+                    easing: resolved.easing,
+                    delay: resolved.delay,
+                    disabled: false,
+                    iterations,
+                }, options.onDone);
+            }
+        }
         if (isSpring) {
             return new SpringPlayer(host, frames, spring ?? {}, options.delay ?? config.delay, iterations, options.onDone);
         }
@@ -673,20 +794,58 @@ class AnimationEngine {
     #applyFinalStyles(host, frames) {
         applyComposedStyle(host, composeFinalStyle(frames));
     }
-    #prepareSvgStrokeDraw(host, frames) {
-        if (!frames['strokeDashoffset'] || !this.#isSvgGeometryElement(host)) {
+    #resolveSvgFrames(host, frames) {
+        if (!frames.pathLength && !frames.pathOffset) {
+            return frames;
+        }
+        const L = this.#getPathLength(host);
+        const resolved = { ...frames };
+        const pValues = frames.pathLength ? frames.pathLength.map((v) => Number(v)) : [1];
+        const oValues = frames.pathOffset ? frames.pathOffset.map((v) => Number(v)) : [0];
+        const maxLen = Math.max(pValues.length, oValues.length);
+        const strokeDasharray = [];
+        const strokeDashoffset = [];
+        for (let i = 0; i < maxLen; i++) {
+            const p = pValues[Math.min(i, pValues.length - 1)];
+            const o = oValues[Math.min(i, oValues.length - 1)];
+            strokeDasharray.push(`${p * L} ${L}`);
+            strokeDashoffset.push(-o * L);
+        }
+        resolved['strokeDasharray'] = strokeDasharray;
+        resolved['strokeDashoffset'] = strokeDashoffset;
+        delete resolved['pathLength'];
+        delete resolved['pathOffset'];
+        return resolved;
+    }
+    #prepareSvgPathDraw(host, frames) {
+        const hasPathProps = frames.strokeDashoffset || frames.strokeDasharray || frames.pathLength || frames.pathOffset;
+        if (!hasPathProps || !this.#isSvgGeometryElement(host)) {
             return;
         }
-        let length = 28;
+        const styledHost = host;
+        const L = this.#getPathLength(host);
+        if (frames.strokeDasharray && frames.strokeDasharray.length > 0) {
+            styledHost.style.strokeDasharray = String(frames.strokeDasharray[0]);
+        }
+        else if (frames.strokeDashoffset || frames.pathLength || frames.pathOffset) {
+            styledHost.style.strokeDasharray = `${L}`;
+        }
+        if (frames.strokeDashoffset && frames.strokeDashoffset.length > 0) {
+            styledHost.style.strokeDashoffset = String(frames.strokeDashoffset[0]);
+        }
+        else if (frames.pathLength && frames.pathLength.length > 0) {
+            styledHost.style.strokeDashoffset = `${Number(frames.pathLength[0]) * L}`;
+        }
+    }
+    #getPathLength(host) {
+        if (!this.#isSvgGeometryElement(host))
+            return 28;
         try {
-            length = host.getTotalLength() || length;
+            return host.getTotalLength() || 28;
         }
         catch {
-            length = 28;
+            return 28;
         }
-        const styledHost = host;
-        styledHost.style.strokeDasharray = `${length}`;
-        styledHost.style.strokeDashoffset = `${length}`;
     }
     #isSvgGeometryElement(host) {
         const view = host.ownerDocument?.defaultView;
@@ -742,7 +901,7 @@ class MoveVariantsDirective {
             if (!state)
                 return;
             this.#currentPlayer?.cancel();
-            const { spring, duration, easing, delay, ...keyframesMap } = state;
+            const { spring, duration, easing, delay, transition, ...keyframesMap } = state;
             const keyframes = keyframesMap;
             const staggerDelay = this.#stagger?.getDelay(this.#host.nativeElement) ?? 0;
             const config = resolveMovementConfig(this.#defaults, {
@@ -755,6 +914,7 @@ class MoveVariantsDirective {
                 config,
                 spring: spring ?? this.moveSpring(),
                 disabled: config.disabled,
+                transition,
             });
         });
     }
@@ -930,7 +1090,7 @@ function statesToKeyframes(from, to) {
     for (const key of Object.keys(from)) {
         const f = from[key];
         const t = to[key];
-        if (f !== undefined && t !== undefined) {
+        if (typeof f === 'number' && typeof t === 'number') {
             result[key] = [f, t];
         }
     }
@@ -1029,13 +1189,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImpor
                 }]
         }], propDecorators: { moveLeave: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveLeave", required: false }] }], moveDuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveDuration", required: false }] }], moveEasing: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveEasing", required: false }] }], moveDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveDelay", required: false }] }], moveDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveDisabled", required: false }] }], moveSpring: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveSpring", required: false }] }] } });
 
+function optionalNumberAttribute$3(value) {
+    if (value === undefined || value === null || value === '') {
+        return undefined;
+    }
+    return Number(value);
+}
 class MoveHoverDirective {
     moveWhileHover = input.required(...(ngDevMode ? [{ debugName: "moveWhileHover" }] : /* istanbul ignore next */ []));
-    moveDuration = input(undefined, ...(ngDevMode ? [{ debugName: "moveDuration" }] : /* istanbul ignore next */ []));
+    moveDuration = input(undefined, { ...(ngDevMode ? { debugName: "moveDuration" } : /* istanbul ignore next */ {}), transform: optionalNumberAttribute$3 });
     moveEasing = input(undefined, ...(ngDevMode ? [{ debugName: "moveEasing" }] : /* istanbul ignore next */ []));
-    moveDelay = input(undefined, ...(ngDevMode ? [{ debugName: "moveDelay" }] : /* istanbul ignore next */ []));
+    moveDelay = input(undefined, { ...(ngDevMode ? { debugName: "moveDelay" } : /* istanbul ignore next */ {}), transform: optionalNumberAttribute$3 });
     moveDisabled = input(undefined, ...(ngDevMode ? [{ debugName: "moveDisabled" }] : /* istanbul ignore next */ []));
     moveSpring = input(undefined, ...(ngDevMode ? [{ debugName: "moveSpring" }] : /* istanbul ignore next */ []));
+    moveReverseDuration = input(undefined, { ...(ngDevMode ? { debugName: "moveReverseDuration" } : /* istanbul ignore next */ {}), transform: optionalNumberAttribute$3 });
+    moveReverseEasing = input(undefined, ...(ngDevMode ? [{ debugName: "moveReverseEasing" }] : /* istanbul ignore next */ []));
     #defaults = inject(MOVEMENT_CONFIG);
     #documentRef = inject(DOCUMENT);
     #host = inject((ElementRef));
@@ -1080,10 +1248,22 @@ class MoveHoverDirective {
             return;
         let frames = resolveMoveFrames(this.moveWhileHover(), 'enter');
         if (reverse) {
+            const reverseDuration = this.moveReverseDuration();
+            if (reverseDuration === 0) {
+                clearComposedStyle(this.#host.nativeElement, Object.keys(frames));
+                return;
+            }
             frames = reverseFrames(frames);
         }
+        const reverseConfig = reverse
+            ? resolveMovementConfig({ ...this.#defaults, duration: 200, easing: 'ease-out', delay: 0 }, {
+                duration: this.moveReverseDuration() ?? this.moveDuration(),
+                easing: this.moveReverseEasing(),
+                delay: 0,
+            }, isReduced)
+            : config;
         this.#currentPlayer = this.#engine.play(this.#host.nativeElement, frames, {
-            config,
+            config: reverseConfig,
             spring: this.moveSpring(),
             disabled: false,
         });
@@ -1092,7 +1272,7 @@ class MoveHoverDirective {
         this.#currentPlayer?.cancel();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: MoveHoverDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.2", type: MoveHoverDirective, isStandalone: true, selector: "[moveWhileHover]", inputs: { moveWhileHover: { classPropertyName: "moveWhileHover", publicName: "moveWhileHover", isSignal: true, isRequired: true, transformFunction: null }, moveDuration: { classPropertyName: "moveDuration", publicName: "moveDuration", isSignal: true, isRequired: false, transformFunction: null }, moveEasing: { classPropertyName: "moveEasing", publicName: "moveEasing", isSignal: true, isRequired: false, transformFunction: null }, moveDelay: { classPropertyName: "moveDelay", publicName: "moveDelay", isSignal: true, isRequired: false, transformFunction: null }, moveDisabled: { classPropertyName: "moveDisabled", publicName: "moveDisabled", isSignal: true, isRequired: false, transformFunction: null }, moveSpring: { classPropertyName: "moveSpring", publicName: "moveSpring", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "touchstart": "onTouchStart($event)", "touchend": "onTouchEnd()", "touchcancel": "onTouchEnd()" } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.2", type: MoveHoverDirective, isStandalone: true, selector: "[moveWhileHover]", inputs: { moveWhileHover: { classPropertyName: "moveWhileHover", publicName: "moveWhileHover", isSignal: true, isRequired: true, transformFunction: null }, moveDuration: { classPropertyName: "moveDuration", publicName: "moveDuration", isSignal: true, isRequired: false, transformFunction: null }, moveEasing: { classPropertyName: "moveEasing", publicName: "moveEasing", isSignal: true, isRequired: false, transformFunction: null }, moveDelay: { classPropertyName: "moveDelay", publicName: "moveDelay", isSignal: true, isRequired: false, transformFunction: null }, moveDisabled: { classPropertyName: "moveDisabled", publicName: "moveDisabled", isSignal: true, isRequired: false, transformFunction: null }, moveSpring: { classPropertyName: "moveSpring", publicName: "moveSpring", isSignal: true, isRequired: false, transformFunction: null }, moveReverseDuration: { classPropertyName: "moveReverseDuration", publicName: "moveReverseDuration", isSignal: true, isRequired: false, transformFunction: null }, moveReverseEasing: { classPropertyName: "moveReverseEasing", publicName: "moveReverseEasing", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "touchstart": "onTouchStart($event)", "touchend": "onTouchEnd()", "touchcancel": "onTouchEnd()" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: MoveHoverDirective, decorators: [{
             type: Directive,
@@ -1106,15 +1286,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImpor
                         '(touchcancel)': 'onTouchEnd()',
                     },
                 }]
-        }], propDecorators: { moveWhileHover: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveWhileHover", required: true }] }], moveDuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveDuration", required: false }] }], moveEasing: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveEasing", required: false }] }], moveDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveDelay", required: false }] }], moveDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveDisabled", required: false }] }], moveSpring: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveSpring", required: false }] }] } });
+        }], propDecorators: { moveWhileHover: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveWhileHover", required: true }] }], moveDuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveDuration", required: false }] }], moveEasing: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveEasing", required: false }] }], moveDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveDelay", required: false }] }], moveDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveDisabled", required: false }] }], moveSpring: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveSpring", required: false }] }], moveReverseDuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveReverseDuration", required: false }] }], moveReverseEasing: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveReverseEasing", required: false }] }] } });
 
+function optionalNumberAttribute$2(value) {
+    if (value === undefined || value === null || value === '') {
+        return undefined;
+    }
+    return Number(value);
+}
 class MoveTapDirective {
     moveWhileTap = input.required(...(ngDevMode ? [{ debugName: "moveWhileTap" }] : /* istanbul ignore next */ []));
-    moveDuration = input(undefined, ...(ngDevMode ? [{ debugName: "moveDuration" }] : /* istanbul ignore next */ []));
+    moveDuration = input(undefined, { ...(ngDevMode ? { debugName: "moveDuration" } : /* istanbul ignore next */ {}), transform: optionalNumberAttribute$2 });
     moveEasing = input(undefined, ...(ngDevMode ? [{ debugName: "moveEasing" }] : /* istanbul ignore next */ []));
-    moveDelay = input(undefined, ...(ngDevMode ? [{ debugName: "moveDelay" }] : /* istanbul ignore next */ []));
+    moveDelay = input(undefined, { ...(ngDevMode ? { debugName: "moveDelay" } : /* istanbul ignore next */ {}), transform: optionalNumberAttribute$2 });
     moveDisabled = input(undefined, ...(ngDevMode ? [{ debugName: "moveDisabled" }] : /* istanbul ignore next */ []));
     moveSpring = input(undefined, ...(ngDevMode ? [{ debugName: "moveSpring" }] : /* istanbul ignore next */ []));
+    moveReverseDuration = input(undefined, { ...(ngDevMode ? { debugName: "moveReverseDuration" } : /* istanbul ignore next */ {}), transform: optionalNumberAttribute$2 });
+    moveReverseEasing = input(undefined, ...(ngDevMode ? [{ debugName: "moveReverseEasing" }] : /* istanbul ignore next */ []));
     #defaults = inject(MOVEMENT_CONFIG);
     #documentRef = inject(DOCUMENT);
     #host = inject((ElementRef));
@@ -1146,10 +1334,22 @@ class MoveTapDirective {
             return;
         let frames = resolveMoveFrames(this.moveWhileTap(), 'enter');
         if (reverse) {
+            const reverseDuration = this.moveReverseDuration();
+            if (reverseDuration === 0) {
+                clearComposedStyle(this.#host.nativeElement, Object.keys(frames));
+                return;
+            }
             frames = reverseFrames(frames);
         }
+        const reverseConfig = reverse
+            ? resolveMovementConfig({ ...this.#defaults, duration: 200, easing: 'ease-out', delay: 0 }, {
+                duration: this.moveReverseDuration() ?? this.moveDuration(),
+                easing: this.moveReverseEasing(),
+                delay: 0,
+            }, isReduced)
+            : config;
         this.#currentPlayer = this.#engine.play(this.#host.nativeElement, frames, {
-            config,
+            config: reverseConfig,
             spring: this.moveSpring(),
             disabled: false,
         });
@@ -1158,7 +1358,7 @@ class MoveTapDirective {
         this.#currentPlayer?.cancel();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: MoveTapDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.2", type: MoveTapDirective, isStandalone: true, selector: "[moveWhileTap]", inputs: { moveWhileTap: { classPropertyName: "moveWhileTap", publicName: "moveWhileTap", isSignal: true, isRequired: true, transformFunction: null }, moveDuration: { classPropertyName: "moveDuration", publicName: "moveDuration", isSignal: true, isRequired: false, transformFunction: null }, moveEasing: { classPropertyName: "moveEasing", publicName: "moveEasing", isSignal: true, isRequired: false, transformFunction: null }, moveDelay: { classPropertyName: "moveDelay", publicName: "moveDelay", isSignal: true, isRequired: false, transformFunction: null }, moveDisabled: { classPropertyName: "moveDisabled", publicName: "moveDisabled", isSignal: true, isRequired: false, transformFunction: null }, moveSpring: { classPropertyName: "moveSpring", publicName: "moveSpring", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "pointerdown": "onPointerDown()", "pointerup": "onPointerUp()", "pointercancel": "onPointerUp()", "pointerleave": "onPointerUp()" } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.2", type: MoveTapDirective, isStandalone: true, selector: "[moveWhileTap]", inputs: { moveWhileTap: { classPropertyName: "moveWhileTap", publicName: "moveWhileTap", isSignal: true, isRequired: true, transformFunction: null }, moveDuration: { classPropertyName: "moveDuration", publicName: "moveDuration", isSignal: true, isRequired: false, transformFunction: null }, moveEasing: { classPropertyName: "moveEasing", publicName: "moveEasing", isSignal: true, isRequired: false, transformFunction: null }, moveDelay: { classPropertyName: "moveDelay", publicName: "moveDelay", isSignal: true, isRequired: false, transformFunction: null }, moveDisabled: { classPropertyName: "moveDisabled", publicName: "moveDisabled", isSignal: true, isRequired: false, transformFunction: null }, moveSpring: { classPropertyName: "moveSpring", publicName: "moveSpring", isSignal: true, isRequired: false, transformFunction: null }, moveReverseDuration: { classPropertyName: "moveReverseDuration", publicName: "moveReverseDuration", isSignal: true, isRequired: false, transformFunction: null }, moveReverseEasing: { classPropertyName: "moveReverseEasing", publicName: "moveReverseEasing", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "pointerdown": "onPointerDown()", "pointerup": "onPointerUp()", "pointercancel": "onPointerUp()", "pointerleave": "onPointerUp()" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: MoveTapDirective, decorators: [{
             type: Directive,
@@ -1171,7 +1371,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImpor
                         '(pointerleave)': 'onPointerUp()',
                     },
                 }]
-        }], propDecorators: { moveWhileTap: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveWhileTap", required: true }] }], moveDuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveDuration", required: false }] }], moveEasing: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveEasing", required: false }] }], moveDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveDelay", required: false }] }], moveDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveDisabled", required: false }] }], moveSpring: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveSpring", required: false }] }] } });
+        }], propDecorators: { moveWhileTap: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveWhileTap", required: true }] }], moveDuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveDuration", required: false }] }], moveEasing: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveEasing", required: false }] }], moveDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveDelay", required: false }] }], moveDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveDisabled", required: false }] }], moveSpring: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveSpring", required: false }] }], moveReverseDuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveReverseDuration", required: false }] }], moveReverseEasing: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveReverseEasing", required: false }] }] } });
 
 class MoveStaggerDirective {
     moveStagger = input.required(...(ngDevMode ? [{ debugName: "moveStagger" }] : /* istanbul ignore next */ []));
@@ -2455,7 +2655,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImpor
                 }]
         }], propDecorators: { moveLoop: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveLoop", required: false }] }], moveDuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveDuration", required: false }] }], moveEasing: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveEasing", required: false }] }], moveDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveDelay", required: false }] }], moveDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveDisabled", required: false }] }], moveSpring: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveSpring", required: false }] }] } });
 
-function optionalNumberAttribute(value) {
+function optionalNumberAttribute$1(value) {
     if (value === undefined || value === null || value === '') {
         return undefined;
     }
@@ -2464,13 +2664,14 @@ function optionalNumberAttribute(value) {
 class MoveTargetDirective {
     moveTarget = input.required(...(ngDevMode ? [{ debugName: "moveTarget" }] : /* istanbul ignore next */ []));
     moveFrames = input.required(...(ngDevMode ? [{ debugName: "moveFrames" }] : /* istanbul ignore next */ []));
-    moveDuration = input(undefined, { ...(ngDevMode ? { debugName: "moveDuration" } : /* istanbul ignore next */ {}), transform: optionalNumberAttribute });
+    moveDuration = input(undefined, { ...(ngDevMode ? { debugName: "moveDuration" } : /* istanbul ignore next */ {}), transform: optionalNumberAttribute$1 });
     moveEasing = input(undefined, ...(ngDevMode ? [{ debugName: "moveEasing" }] : /* istanbul ignore next */ []));
-    moveDelay = input(undefined, { ...(ngDevMode ? { debugName: "moveDelay" } : /* istanbul ignore next */ {}), transform: optionalNumberAttribute });
+    moveDelay = input(undefined, { ...(ngDevMode ? { debugName: "moveDelay" } : /* istanbul ignore next */ {}), transform: optionalNumberAttribute$1 });
     moveSpring = input(undefined, ...(ngDevMode ? [{ debugName: "moveSpring" }] : /* istanbul ignore next */ []));
     moveDisabled = input(undefined, ...(ngDevMode ? [{ debugName: "moveDisabled" }] : /* istanbul ignore next */ []));
-    moveReverseDuration = input(undefined, { ...(ngDevMode ? { debugName: "moveReverseDuration" } : /* istanbul ignore next */ {}), transform: optionalNumberAttribute });
+    moveReverseDuration = input(undefined, { ...(ngDevMode ? { debugName: "moveReverseDuration" } : /* istanbul ignore next */ {}), transform: optionalNumberAttribute$1 });
     moveReverseEasing = input(undefined, ...(ngDevMode ? [{ debugName: "moveReverseEasing" }] : /* istanbul ignore next */ []));
+    moveTransition = input(undefined, ...(ngDevMode ? [{ debugName: "moveTransition" }] : /* istanbul ignore next */ []));
     #defaults = inject(MOVEMENT_CONFIG);
     #documentRef = inject(DOCUMENT);
     #host = inject((ElementRef));
@@ -2502,6 +2703,7 @@ class MoveTargetDirective {
             config,
             spring: this.moveSpring(),
             disabled: config.disabled,
+            transition: this.moveTransition(),
         });
     }
     #playReverse(frames) {
@@ -2517,6 +2719,7 @@ class MoveTargetDirective {
             config,
             spring: this.moveSpring(),
             disabled: config.disabled,
+            transition: this.moveTransition(),
         });
     }
     ngOnDestroy() {
@@ -2524,7 +2727,7 @@ class MoveTargetDirective {
         this.#currentPlayer?.cancel();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: MoveTargetDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.2", type: MoveTargetDirective, isStandalone: true, selector: "[moveTarget]", inputs: { moveTarget: { classPropertyName: "moveTarget", publicName: "moveTarget", isSignal: true, isRequired: true, transformFunction: null }, moveFrames: { classPropertyName: "moveFrames", publicName: "moveFrames", isSignal: true, isRequired: true, transformFunction: null }, moveDuration: { classPropertyName: "moveDuration", publicName: "moveDuration", isSignal: true, isRequired: false, transformFunction: null }, moveEasing: { classPropertyName: "moveEasing", publicName: "moveEasing", isSignal: true, isRequired: false, transformFunction: null }, moveDelay: { classPropertyName: "moveDelay", publicName: "moveDelay", isSignal: true, isRequired: false, transformFunction: null }, moveSpring: { classPropertyName: "moveSpring", publicName: "moveSpring", isSignal: true, isRequired: false, transformFunction: null }, moveDisabled: { classPropertyName: "moveDisabled", publicName: "moveDisabled", isSignal: true, isRequired: false, transformFunction: null }, moveReverseDuration: { classPropertyName: "moveReverseDuration", publicName: "moveReverseDuration", isSignal: true, isRequired: false, transformFunction: null }, moveReverseEasing: { classPropertyName: "moveReverseEasing", publicName: "moveReverseEasing", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.2", type: MoveTargetDirective, isStandalone: true, selector: "[moveTarget]", inputs: { moveTarget: { classPropertyName: "moveTarget", publicName: "moveTarget", isSignal: true, isRequired: true, transformFunction: null }, moveFrames: { classPropertyName: "moveFrames", publicName: "moveFrames", isSignal: true, isRequired: true, transformFunction: null }, moveDuration: { classPropertyName: "moveDuration", publicName: "moveDuration", isSignal: true, isRequired: false, transformFunction: null }, moveEasing: { classPropertyName: "moveEasing", publicName: "moveEasing", isSignal: true, isRequired: false, transformFunction: null }, moveDelay: { classPropertyName: "moveDelay", publicName: "moveDelay", isSignal: true, isRequired: false, transformFunction: null }, moveSpring: { classPropertyName: "moveSpring", publicName: "moveSpring", isSignal: true, isRequired: false, transformFunction: null }, moveDisabled: { classPropertyName: "moveDisabled", publicName: "moveDisabled", isSignal: true, isRequired: false, transformFunction: null }, moveReverseDuration: { classPropertyName: "moveReverseDuration", publicName: "moveReverseDuration", isSignal: true, isRequired: false, transformFunction: null }, moveReverseEasing: { classPropertyName: "moveReverseEasing", publicName: "moveReverseEasing", isSignal: true, isRequired: false, transformFunction: null }, moveTransition: { classPropertyName: "moveTransition", publicName: "moveTransition", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: MoveTargetDirective, decorators: [{
             type: Directive,
@@ -2532,7 +2735,202 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImpor
                     selector: '[moveTarget]',
                     standalone: true,
                 }]
-        }], propDecorators: { moveTarget: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveTarget", required: true }] }], moveFrames: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveFrames", required: true }] }], moveDuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveDuration", required: false }] }], moveEasing: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveEasing", required: false }] }], moveDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveDelay", required: false }] }], moveSpring: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveSpring", required: false }] }], moveDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveDisabled", required: false }] }], moveReverseDuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveReverseDuration", required: false }] }], moveReverseEasing: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveReverseEasing", required: false }] }] } });
+        }], propDecorators: { moveTarget: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveTarget", required: true }] }], moveFrames: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveFrames", required: true }] }], moveDuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveDuration", required: false }] }], moveEasing: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveEasing", required: false }] }], moveDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveDelay", required: false }] }], moveSpring: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveSpring", required: false }] }], moveDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveDisabled", required: false }] }], moveReverseDuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveReverseDuration", required: false }] }], moveReverseEasing: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveReverseEasing", required: false }] }], moveTransition: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveTransition", required: false }] }] } });
+
+function optionalNumberAttribute(value) {
+    if (value === undefined || value === null || value === '') {
+        return undefined;
+    }
+    return Number(value);
+}
+class MoveTriggerDirective {
+    moveTrigger = input.required(...(ngDevMode ? [{ debugName: "moveTrigger" }] : /* istanbul ignore next */ []));
+    moveFrames = input.required(...(ngDevMode ? [{ debugName: "moveFrames" }] : /* istanbul ignore next */ []));
+    moveResetFrames = input(undefined, ...(ngDevMode ? [{ debugName: "moveResetFrames" }] : /* istanbul ignore next */ []));
+    moveResetState = input('clear', ...(ngDevMode ? [{ debugName: "moveResetState" }] : /* istanbul ignore next */ []));
+    moveDuration = input(undefined, { ...(ngDevMode ? { debugName: "moveDuration" } : /* istanbul ignore next */ {}), transform: optionalNumberAttribute });
+    moveEasing = input(undefined, ...(ngDevMode ? [{ debugName: "moveEasing" }] : /* istanbul ignore next */ []));
+    moveDelay = input(undefined, { ...(ngDevMode ? { debugName: "moveDelay" } : /* istanbul ignore next */ {}), transform: optionalNumberAttribute });
+    moveSpring = input(undefined, ...(ngDevMode ? [{ debugName: "moveSpring" }] : /* istanbul ignore next */ []));
+    moveDisabled = input(undefined, ...(ngDevMode ? [{ debugName: "moveDisabled" }] : /* istanbul ignore next */ []));
+    moveReverseDuration = input(undefined, { ...(ngDevMode ? { debugName: "moveReverseDuration" } : /* istanbul ignore next */ {}), transform: optionalNumberAttribute });
+    moveReverseEasing = input(undefined, ...(ngDevMode ? [{ debugName: "moveReverseEasing" }] : /* istanbul ignore next */ []));
+    #defaults = inject(MOVEMENT_CONFIG);
+    #documentRef = inject(DOCUMENT);
+    #host = inject((ElementRef));
+    #engine = inject(AnimationEngine);
+    #currentPlayer = null;
+    #hasPlayedForward = false;
+    #triggerEffect = effect(() => {
+        const active = this.moveTrigger();
+        const frames = this.moveFrames();
+        if (active) {
+            this.#playForward(frames);
+            this.#hasPlayedForward = true;
+            return;
+        }
+        if (this.#hasPlayedForward) {
+            this.#playReset(frames);
+        }
+    }, ...(ngDevMode ? [{ debugName: "#triggerEffect" }] : /* istanbul ignore next */ []));
+    play(frames) {
+        const targetFrames = frames ?? this.moveFrames();
+        this.#playForward(targetFrames);
+        this.#hasPlayedForward = true;
+        return this.#currentPlayer?.finished ?? Promise.resolve();
+    }
+    reset() {
+        this.#currentPlayer?.cancel();
+        const frames = this.moveFrames();
+        this.#applyReset(frames);
+    }
+    set(state) {
+        this.#currentPlayer?.cancel();
+        applyComposedStyle(this.#host.nativeElement, state);
+    }
+    #playForward(frames) {
+        this.#currentPlayer?.cancel();
+        const isReduced = prefersReducedMotion(this.#documentRef);
+        const config = resolveMovementConfig(this.#defaults, {
+            duration: this.moveDuration(),
+            easing: this.moveEasing(),
+            delay: this.moveDelay(),
+            disabled: this.moveDisabled(),
+        }, isReduced);
+        this.#currentPlayer = this.#engine.play(this.#host.nativeElement, frames, {
+            config,
+            spring: this.moveSpring(),
+            disabled: config.disabled,
+        });
+    }
+    #playReset(frames) {
+        this.#currentPlayer?.cancel();
+        const resetFrames = this.moveResetFrames();
+        if (resetFrames) {
+            const isReduced = prefersReducedMotion(this.#documentRef);
+            const config = resolveMovementConfig({ ...this.#defaults, duration: 200, easing: 'ease-out', delay: 0 }, {
+                duration: this.moveReverseDuration() ?? this.moveDuration(),
+                easing: this.moveReverseEasing(),
+                delay: 0,
+                disabled: this.moveDisabled(),
+            }, isReduced);
+            this.#currentPlayer = this.#engine.play(this.#host.nativeElement, resetFrames, {
+                config,
+                spring: this.moveSpring(),
+                disabled: config.disabled,
+            });
+            return;
+        }
+        const reverseDuration = this.moveReverseDuration();
+        if (reverseDuration === 0) {
+            this.#applyReset(frames);
+            return;
+        }
+        const isReduced = prefersReducedMotion(this.#documentRef);
+        const config = resolveMovementConfig({ ...this.#defaults, duration: 200, easing: 'ease-out', delay: 0 }, {
+            duration: reverseDuration ?? this.moveDuration(),
+            easing: this.moveReverseEasing(),
+            delay: 0,
+            disabled: this.moveDisabled(),
+        }, isReduced);
+        if (config.disabled) {
+            this.#applyReset(frames);
+            return;
+        }
+        // For triggers, reverse is typically not desired; we reset to initial/clear.
+        // We apply the initial style of the forward frames to restore state.
+        this.#applyReset(frames);
+    }
+    #applyReset(frames) {
+        const mode = this.moveResetState();
+        const host = this.#host.nativeElement;
+        if (mode === 'clear') {
+            clearComposedStyle(host, Object.keys(frames));
+            return;
+        }
+        if (mode === 'initial') {
+            clearComposedStyle(host, Object.keys(frames));
+            applyComposedStyle(host, composeInitialStyle(frames));
+            return;
+        }
+        if (mode === 'final') {
+            clearComposedStyle(host, Object.keys(frames));
+            applyComposedStyle(host, composeFinalStyle(frames));
+        }
+    }
+    ngOnDestroy() {
+        this.#triggerEffect.destroy();
+        this.#currentPlayer?.cancel();
+        const frames = this.moveFrames();
+        if (frames) {
+            clearComposedStyle(this.#host.nativeElement, Object.keys(frames));
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: MoveTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.2", type: MoveTriggerDirective, isStandalone: true, selector: "[moveTrigger]", inputs: { moveTrigger: { classPropertyName: "moveTrigger", publicName: "moveTrigger", isSignal: true, isRequired: true, transformFunction: null }, moveFrames: { classPropertyName: "moveFrames", publicName: "moveFrames", isSignal: true, isRequired: true, transformFunction: null }, moveResetFrames: { classPropertyName: "moveResetFrames", publicName: "moveResetFrames", isSignal: true, isRequired: false, transformFunction: null }, moveResetState: { classPropertyName: "moveResetState", publicName: "moveResetState", isSignal: true, isRequired: false, transformFunction: null }, moveDuration: { classPropertyName: "moveDuration", publicName: "moveDuration", isSignal: true, isRequired: false, transformFunction: null }, moveEasing: { classPropertyName: "moveEasing", publicName: "moveEasing", isSignal: true, isRequired: false, transformFunction: null }, moveDelay: { classPropertyName: "moveDelay", publicName: "moveDelay", isSignal: true, isRequired: false, transformFunction: null }, moveSpring: { classPropertyName: "moveSpring", publicName: "moveSpring", isSignal: true, isRequired: false, transformFunction: null }, moveDisabled: { classPropertyName: "moveDisabled", publicName: "moveDisabled", isSignal: true, isRequired: false, transformFunction: null }, moveReverseDuration: { classPropertyName: "moveReverseDuration", publicName: "moveReverseDuration", isSignal: true, isRequired: false, transformFunction: null }, moveReverseEasing: { classPropertyName: "moveReverseEasing", publicName: "moveReverseEasing", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["moveTrigger"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: MoveTriggerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[moveTrigger]',
+                    standalone: true,
+                    exportAs: 'moveTrigger',
+                }]
+        }], propDecorators: { moveTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveTrigger", required: true }] }], moveFrames: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveFrames", required: true }] }], moveResetFrames: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveResetFrames", required: false }] }], moveResetState: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveResetState", required: false }] }], moveDuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveDuration", required: false }] }], moveEasing: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveEasing", required: false }] }], moveDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveDelay", required: false }] }], moveSpring: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveSpring", required: false }] }], moveDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveDisabled", required: false }] }], moveReverseDuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveReverseDuration", required: false }] }], moveReverseEasing: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveReverseEasing", required: false }] }] } });
+
+/**
+ * Returns keyframes for a path-drawing animation.
+ * Ideal for SVG `<path>`, `<circle>`, `<line>`, etc.
+ *
+ * @example
+ * ```html
+ * <path [moveTarget]="animate()" [moveFrames]="movePathDraw({ opacity: [0, 1] })" moveDuration="700" />
+ * ```
+ */
+function movePathDraw(overrides) {
+    return {
+        pathLength: [0, 1],
+        opacity: [0, 1],
+        ...overrides,
+    };
+}
+/**
+ * Returns keyframes for a subtle pulse animation on an icon.
+ */
+function moveIconPulse(overrides) {
+    return {
+        scale: [1, 1.08, 1],
+        opacity: [1, 0.85, 1],
+        ...overrides,
+    };
+}
+/**
+ * Returns keyframes for a subtle bounce animation on an icon.
+ */
+function moveIconBounce(overrides) {
+    return {
+        y: [0, -3, 0],
+        ...overrides,
+    };
+}
+/**
+ * Returns keyframes for a subtle shake animation on an icon.
+ */
+function moveIconShake(overrides) {
+    return {
+        rotate: [0, -8, 8, -8, 8, 0],
+        ...overrides,
+    };
+}
+/**
+ * Returns keyframes for a subtle rotate animation on an icon.
+ */
+function moveIconRotate(overrides) {
+    return {
+        rotate: [0, 15, 0],
+        ...overrides,
+    };
+}
 
 function provideMovement(config = {}) {
     return makeEnvironmentProviders([
@@ -2566,6 +2964,7 @@ const MOVEMENT_DIRECTIVES = [
     MoveAnimationDirective,
     MoveLoopDirective,
     MoveTargetDirective,
+    MoveTriggerDirective,
 ];
 
 /*
@@ -2576,5 +2975,5 @@ const MOVEMENT_DIRECTIVES = [
  * Generated bundle index. Do not edit.
  */
 
-export { AnimationEngine, MOVEMENT_CONFIG, MOVEMENT_DEFAULTS, MOVEMENT_DIRECTIVES, MOVE_PRESENCE_PARENT, MOVE_PRESETS, MOVE_STAGGER_PARENT, MOVE_VARIANTS_PARENT, MoveAnimateDirective, MoveAnimationDirective, MoveDragDirective, MoveEnterDirective, MoveFocusDirective, MoveHoverDirective, MoveInViewDirective, MoveLayoutDirective, MoveLeaveDirective, MoveLoopDirective, MoveParallaxDirective, MovePresenceDirective, MoveScrollDirective, MoveSmoothScrollDirective, MoveStaggerDirective, MoveTapDirective, MoveTargetDirective, MoveTextDirective, MoveVariantsDirective, SmoothScrollService, SpringPlayer, WaapiPlayer, applyInitialStyles, clearInitialStyles, isValidScrollOffset, prefersReducedMotion, provideMovement, resolveMoveFrames, resolveMovementConfig, reverseFrames, validateDragElastic, validateSpring };
+export { AnimationEngine, MOVEMENT_CONFIG, MOVEMENT_DEFAULTS, MOVEMENT_DIRECTIVES, MOVE_PRESENCE_PARENT, MOVE_PRESETS, MOVE_STAGGER_PARENT, MOVE_VARIANTS_PARENT, MoveAnimateDirective, MoveAnimationDirective, MoveDragDirective, MoveEnterDirective, MoveFocusDirective, MoveHoverDirective, MoveInViewDirective, MoveLayoutDirective, MoveLeaveDirective, MoveLoopDirective, MoveParallaxDirective, MovePresenceDirective, MoveScrollDirective, MoveSmoothScrollDirective, MoveStaggerDirective, MoveTapDirective, MoveTargetDirective, MoveTextDirective, MoveTriggerDirective, MoveVariantsDirective, SmoothScrollService, SpringPlayer, WaapiPlayer, applyInitialStyles, clearComposedStyle, clearInitialStyles, composeTransitionKeyframes, isValidScrollOffset, moveIconBounce, moveIconPulse, moveIconRotate, moveIconShake, movePathDraw, prefersReducedMotion, provideMovement, resolveMoveFrames, resolveMovementConfig, reverseFrames, validateDragElastic, validateSpring };
 //# sourceMappingURL=angular-movement.mjs.map