angular-movement 0.0.1 → 0.0.2

package/fesm2022/angular-movement.mjs

@@ -1,12 +1,13 @@
 import { isPlatformBrowser, DOCUMENT } from '@angular/common';
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, PLATFORM_ID, Injectable, input, ElementRef, Directive, computed, effect, forwardRef, afterEveryRender, NgZone, signal, ViewContainerRef, TemplateRef, makeEnvironmentProviders } from '@angular/core';
+import { InjectionToken, inject, PLATFORM_ID, Injectable, input, ElementRef, computed, effect, forwardRef, Directive, afterEveryRender, NgZone, signal, ViewContainerRef, TemplateRef, makeEnvironmentProviders } from '@angular/core';
 
 const MOVEMENT_DEFAULTS = {
     duration: 300,
     easing: 'cubic-bezier(0.16, 1, 0.3, 1)',
     delay: 0,
     disabled: false,
+    iterations: 1,
 };
 const MOVEMENT_CONFIG = new InjectionToken('MOVEMENT_CONFIG', {
     factory: () => ({ ...MOVEMENT_DEFAULTS }),
@@ -52,6 +53,18 @@ function getInterpolated(arr, i1, i2, p) {
     const v2 = arr[Math.min(i2, arr.length - 1)];
     return v1 + (v2 - v1) * p;
 }
+const KNOWN_KEYS = new Set([
+    'opacity',
+    'x',
+    'y',
+    'scale',
+    'scaleX',
+    'scaleY',
+    'rotate',
+    'rotateX',
+    'rotateY',
+    'blur',
+]);
 function buildKeyframe(frames, getVal) {
     const keyframe = {};
     const opacity = getVal(frames.opacity);
@@ -87,6 +100,16 @@ function buildKeyframe(frames, getVal) {
     if (rotateX !== undefined || rotateY !== undefined) {
         keyframe.transform = `perspective(${DEFAULT_PERSPECTIVE}) rotateX(${rotateX ?? 0}deg) rotateY(${rotateY ?? 0}deg)`;
     }
+    // Passthrough arbitrary properties for WAAPI (e.g. strokeDashoffset)
+    for (const key in frames) {
+        if (KNOWN_KEYS.has(key))
+            continue;
+        const arr = frames[key];
+        const val = getVal(arr);
+        if (val !== undefined) {
+            keyframe[key] = val;
+        }
+    }
     return keyframe;
 }
 function composeKeyframeAt(frames, index) {
@@ -101,27 +124,51 @@ function composeInitialStyle(frames) {
 function composeFinalStyle(frames) {
     return buildKeyframe(frames, (arr) => (arr && arr.length > 0 ? arr[arr.length - 1] : undefined));
 }
+const KNOWN_STYLE_KEYS = new Set([
+    'opacity',
+    'translate',
+    'scale',
+    'rotate',
+    'transform',
+    'filter',
+]);
 function applyComposedStyle(el, style) {
+    const styledEl = el;
     if (style.opacity !== undefined)
-        el.style.opacity = `${style.opacity}`;
+        styledEl.style.opacity = `${style.opacity}`;
     if (style.translate !== undefined)
-        el.style.translate = style.translate;
+        styledEl.style.translate = style.translate;
     if (style.scale !== undefined)
-        el.style.scale = style.scale;
+        styledEl.style.scale = style.scale;
     if (style.rotate !== undefined)
-        el.style.rotate = style.rotate;
+        styledEl.style.rotate = style.rotate;
     if (style.transform !== undefined)
-        el.style.transform = style.transform;
+        styledEl.style.transform = style.transform;
     if (style.filter !== undefined)
-        el.style.filter = style.filter;
+        styledEl.style.filter = style.filter;
+    // Passthrough arbitrary properties (e.g. strokeDashoffset)
+    for (const key in style) {
+        if (KNOWN_STYLE_KEYS.has(key))
+            continue;
+        const val = style[key];
+        if (val !== undefined) {
+            styledEl.style[key] = String(val);
+        }
+    }
 }
-function clearComposedStyle(el) {
-    el.style.opacity = '';
-    el.style.translate = '';
-    el.style.scale = '';
-    el.style.rotate = '';
-    el.style.transform = '';
-    el.style.filter = '';
+function clearComposedStyle(el, extraKeys) {
+    const styledEl = el;
+    styledEl.style.opacity = '';
+    styledEl.style.translate = '';
+    styledEl.style.scale = '';
+    styledEl.style.rotate = '';
+    styledEl.style.transform = '';
+    styledEl.style.filter = '';
+    if (extraKeys) {
+        for (const key of extraKeys) {
+            styledEl.style[key] = '';
+        }
+    }
 }
 
 const DEFAULT_FADE_OPACITY = [0, 1];
@@ -178,6 +225,7 @@ const MOVE_PRESETS = {
     'bounce-in': {
         enter: { opacity: DEFAULT_FADE_OPACITY, y: [30, 0], scale: [0.85, 1] },
         leave: { opacity: DEFAULT_LEAVE_OPACITY, y: [0, -20], scale: [1, 0.9] },
+        loop: { y: [0, -10, 0], scale: [1, 0.95, 1] },
     },
     'blur-in': {
         enter: { opacity: DEFAULT_FADE_OPACITY, blur: [10, 0] },
@@ -186,10 +234,12 @@ const MOVE_PRESETS = {
     spin: {
         enter: { opacity: DEFAULT_FADE_OPACITY, rotate: [-360, 0] },
         leave: { opacity: DEFAULT_LEAVE_OPACITY, rotate: [0, 360] },
+        loop: { rotate: [0, 360] },
     },
     pulse: {
         enter: { scale: [1, 1.05, 1] },
         leave: { scale: [1, 0.95, 1] },
+        loop: { scale: [1, 1.05, 1] },
     },
     none: {
         enter: { opacity: [1, 1] },
@@ -207,6 +257,7 @@ function resolveMovementConfig(defaults, overrides, reducedMotion) {
         easing: overrides.easing ?? defaults.easing,
         delay: Math.max(0, overrides.delay ?? defaults.delay),
         disabled: reducedMotion || (overrides.disabled ?? defaults.disabled),
+        iterations: overrides.iterations ?? defaults.iterations,
     };
 }
 function resolveMoveFrames(value, phase) {
@@ -216,9 +267,9 @@ function resolveMoveFrames(value, phase) {
             if (typeof ngDevMode !== 'undefined' && ngDevMode) {
                 console.warn(`[Movement] Unknown preset: "${value}". Using "none" preset.`);
             }
-            return MOVE_PRESETS['none'][phase];
+            return MOVE_PRESETS['none'][phase] ?? MOVE_PRESETS['none'].enter;
         }
-        return preset[phase];
+        return preset[phase] ?? preset.enter;
     }
     return value;
 }
@@ -273,12 +324,18 @@ class WaapiPlayer {
             return;
         }
         const keyframes = this.#toWAAPIKeyframes(frames);
+        const iterations = config.iterations ?? 1;
         this.#animation = host.animate(keyframes, {
             duration: config.duration,
             easing: config.easing,
             delay: config.delay,
             fill: 'both',
+            iterations,
         });
+        if (iterations === Infinity) {
+            // Infinite loops never finish; consumer must call cancel() manually.
+            return;
+        }
         this.#animation.addEventListener('finish', () => {
             this.#animation?.commitStyles?.();
             this.#animation?.cancel();
@@ -328,22 +385,28 @@ class SpringPlayer {
     host;
     frames;
     delay;
+    iterations;
     onDone;
     #resolveFinished;
     finished = new Promise((resolve) => {
         this.#resolveFinished = resolve;
     });
     #animation = null;
-    constructor(host, frames, userConfig, delay, onDone) {
+    constructor(host, frames, userConfig, delay, iterations = 1, onDone) {
         this.host = host;
         this.frames = frames;
         this.delay = delay;
+        this.iterations = iterations;
         this.onDone = onDone;
         if (typeof host.animate !== 'function') {
             this.#resolveFinished();
             onDone?.();
             return;
         }
+        if (this.iterations !== 1 && typeof ngDevMode !== 'undefined' && ngDevMode) {
+            console.warn('[Movement] Spring animations with iterations !== 1 may produce visual glitches. ' +
+                'Consider using WaapiPlayer (no spring) for loops.');
+        }
         const config = {
             stiffness: 100,
             damping: 10,
@@ -366,7 +429,12 @@ class SpringPlayer {
             delay: this.delay,
             fill: 'both',
             easing: 'linear', // Spring physics already has the easing baked into the frames
+            iterations: this.iterations,
         });
+        if (this.iterations === Infinity) {
+            // Infinite loops never finish; consumer must call cancel() manually.
+            return;
+        }
         this.#animation.addEventListener('finish', () => {
             this.#animation?.commitStyles?.();
             this.#animation?.cancel();
@@ -459,8 +527,9 @@ class AnimationEngine {
         }
         const config = options.config ?? this.#defaults;
         const isSpring = options.spring || config.easing === 'spring';
+        const iterations = options.iterations ?? config.iterations;
         if (isSpring) {
-            return new SpringPlayer(host, frames, options.spring ?? {}, options.delay ?? config.delay, options.onDone);
+            return new SpringPlayer(host, frames, options.spring ?? {}, options.delay ?? config.delay, iterations, options.onDone);
         }
         else {
             return new WaapiPlayer(host, frames, {
@@ -468,6 +537,7 @@ class AnimationEngine {
                 easing: config.easing,
                 delay: options.delay ?? config.delay,
                 disabled: false,
+                iterations,
             }, options.onDone);
         }
     }
@@ -486,6 +556,81 @@ const MOVE_STAGGER_PARENT = new InjectionToken('MOVE_STAGGER_PARENT');
 
 const MOVE_PRESENCE_PARENT = new InjectionToken('MOVE_PRESENCE_PARENT');
 
+const MOVE_VARIANTS_PARENT = new InjectionToken('MOVE_VARIANTS_PARENT');
+class MoveVariantsDirective {
+    moveVariants = input.required(...(ngDevMode ? [{ debugName: "moveVariants" }] : /* istanbul ignore next */ []));
+    moveAnimate = input(undefined, ...(ngDevMode ? [{ debugName: "moveAnimate" }] : /* istanbul ignore next */ []));
+    moveDuration = input(undefined, ...(ngDevMode ? [{ debugName: "moveDuration" }] : /* istanbul ignore next */ []));
+    moveEasing = input(undefined, ...(ngDevMode ? [{ debugName: "moveEasing" }] : /* istanbul ignore next */ []));
+    moveDelay = input(undefined, ...(ngDevMode ? [{ debugName: "moveDelay" }] : /* istanbul ignore next */ []));
+    moveDisabled = input(undefined, ...(ngDevMode ? [{ debugName: "moveDisabled" }] : /* istanbul ignore next */ []));
+    moveSpring = input(undefined, ...(ngDevMode ? [{ debugName: "moveSpring" }] : /* istanbul ignore next */ []));
+    #parent = inject(MOVE_VARIANTS_PARENT, { optional: true, skipSelf: true });
+    #engine = inject(AnimationEngine);
+    #defaults = inject(MOVEMENT_CONFIG);
+    #documentRef = inject(DOCUMENT);
+    #host = inject((ElementRef));
+    #stagger = inject(MOVE_STAGGER_PARENT, { optional: true });
+    #currentPlayer = null;
+    #isReducedMotion = false;
+    activeVariant = computed(() => {
+        return this.moveAnimate() ?? this.#parent?.activeVariant();
+    }, ...(ngDevMode ? [{ debugName: "activeVariant" }] : /* istanbul ignore next */ []));
+    constructor() {
+        this.#isReducedMotion = prefersReducedMotion(this.#documentRef);
+        this.#stagger?.register(this.#host.nativeElement);
+        effect(() => {
+            const variantName = this.activeVariant();
+            if (!variantName)
+                return;
+            const variants = this.moveVariants();
+            if (!variants)
+                return;
+            const state = variants[variantName];
+            if (!state)
+                return;
+            this.#currentPlayer?.cancel();
+            const { spring, duration, easing, delay, ...keyframesMap } = state;
+            const keyframes = keyframesMap;
+            const staggerDelay = this.#stagger?.getDelay(this.#host.nativeElement) ?? 0;
+            const config = resolveMovementConfig(this.#defaults, {
+                duration: duration ?? this.moveDuration(),
+                easing: easing ?? this.moveEasing(),
+                delay: (delay ?? this.moveDelay() ?? 0) + staggerDelay,
+                disabled: this.moveDisabled(),
+            }, this.#isReducedMotion);
+            this.#currentPlayer = this.#engine.play(this.#host.nativeElement, keyframes, {
+                config,
+                spring: spring ?? this.moveSpring(),
+                disabled: config.disabled,
+            });
+        });
+    }
+    ngOnDestroy() {
+        this.#stagger?.unregister(this.#host.nativeElement);
+        this.#currentPlayer?.cancel();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: MoveVariantsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.2", type: MoveVariantsDirective, isStandalone: true, selector: "[moveVariants]", inputs: { moveVariants: { classPropertyName: "moveVariants", publicName: "moveVariants", isSignal: true, isRequired: true, transformFunction: null }, moveAnimate: { classPropertyName: "moveAnimate", publicName: "moveAnimate", 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 }, moveDisabled: { classPropertyName: "moveDisabled", publicName: "moveDisabled", isSignal: true, isRequired: false, transformFunction: null }, moveSpring: { classPropertyName: "moveSpring", publicName: "moveSpring", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+            {
+                provide: MOVE_VARIANTS_PARENT,
+                useExisting: forwardRef(() => MoveVariantsDirective),
+            },
+        ], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: MoveVariantsDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[moveVariants]',
+                    providers: [
+                        {
+                            provide: MOVE_VARIANTS_PARENT,
+                            useExisting: forwardRef(() => MoveVariantsDirective),
+                        },
+                    ],
+                }]
+        }], ctorParameters: () => [], propDecorators: { moveVariants: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveVariants", required: true }] }], moveAnimate: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveAnimate", 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 }] }] } });
+
 class MoveAnimateDirective {
     move = input(undefined, ...(ngDevMode ? [{ debugName: "move" }] : /* istanbul ignore next */ []));
     moveAnimate = input(undefined, ...(ngDevMode ? [{ debugName: "moveAnimate" }] : /* istanbul ignore next */ []));
@@ -501,10 +646,15 @@ class MoveAnimateDirective {
     #engine = inject(AnimationEngine);
     #stagger = inject(MOVE_STAGGER_PARENT, { optional: true });
     #presence = inject(MOVE_PRESENCE_PARENT, { optional: true });
+    #variantsParent = inject(MOVE_VARIANTS_PARENT, { optional: true });
     #config = this.#defaults;
     #enterPlayer = null;
     #leavePlayer = null;
     ngOnInit() {
+        // If moveVariants is on the same host, let it handle animation
+        if (this.#variantsParent) {
+            return;
+        }
         this.#stagger?.register(this.#host.nativeElement);
         this.#presence?.register(this);
         Promise.resolve().then(() => {
@@ -530,7 +680,7 @@ class MoveAnimateDirective {
         this.#leavePlayer?.cancel();
     }
     playLeave() {
-        if (this.#config.disabled) {
+        if (this.#variantsParent || this.#config.disabled) {
             return Promise.resolve();
         }
         this.#enterPlayer?.cancel();
@@ -871,81 +1021,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImpor
                 }]
         }], 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 }] }] } });
 
-const MOVE_VARIANTS_PARENT = new InjectionToken('MOVE_VARIANTS_PARENT');
-class MoveVariantsDirective {
-    moveVariants = input.required(...(ngDevMode ? [{ debugName: "moveVariants" }] : /* istanbul ignore next */ []));
-    moveAnimate = input(undefined, ...(ngDevMode ? [{ debugName: "moveAnimate" }] : /* istanbul ignore next */ []));
-    moveDuration = input(undefined, ...(ngDevMode ? [{ debugName: "moveDuration" }] : /* istanbul ignore next */ []));
-    moveEasing = input(undefined, ...(ngDevMode ? [{ debugName: "moveEasing" }] : /* istanbul ignore next */ []));
-    moveDelay = input(undefined, ...(ngDevMode ? [{ debugName: "moveDelay" }] : /* istanbul ignore next */ []));
-    moveDisabled = input(undefined, ...(ngDevMode ? [{ debugName: "moveDisabled" }] : /* istanbul ignore next */ []));
-    moveSpring = input(undefined, ...(ngDevMode ? [{ debugName: "moveSpring" }] : /* istanbul ignore next */ []));
-    #parent = inject(MOVE_VARIANTS_PARENT, { optional: true, skipSelf: true });
-    #engine = inject(AnimationEngine);
-    #defaults = inject(MOVEMENT_CONFIG);
-    #documentRef = inject(DOCUMENT);
-    #host = inject((ElementRef));
-    #stagger = inject(MOVE_STAGGER_PARENT, { optional: true });
-    #currentPlayer = null;
-    #isReducedMotion = false;
-    activeVariant = computed(() => {
-        return this.moveAnimate() ?? this.#parent?.activeVariant();
-    }, ...(ngDevMode ? [{ debugName: "activeVariant" }] : /* istanbul ignore next */ []));
-    constructor() {
-        this.#isReducedMotion = prefersReducedMotion(this.#documentRef);
-        this.#stagger?.register(this.#host.nativeElement);
-        effect(() => {
-            const variantName = this.activeVariant();
-            if (!variantName)
-                return;
-            const variants = this.moveVariants();
-            if (!variants)
-                return;
-            const state = variants[variantName];
-            if (!state)
-                return;
-            this.#currentPlayer?.cancel();
-            const { spring, duration, easing, delay, ...keyframesMap } = state;
-            const keyframes = keyframesMap;
-            const staggerDelay = this.#stagger?.getDelay(this.#host.nativeElement) ?? 0;
-            const config = resolveMovementConfig(this.#defaults, {
-                duration: duration ?? this.moveDuration(),
-                easing: easing ?? this.moveEasing(),
-                delay: (delay ?? this.moveDelay() ?? 0) + staggerDelay,
-                disabled: this.moveDisabled(),
-            }, this.#isReducedMotion);
-            this.#currentPlayer = this.#engine.play(this.#host.nativeElement, keyframes, {
-                config,
-                spring: spring ?? this.moveSpring(),
-                disabled: config.disabled,
-            });
-        });
-    }
-    ngOnDestroy() {
-        this.#stagger?.unregister(this.#host.nativeElement);
-        this.#currentPlayer?.cancel();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: MoveVariantsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.2", type: MoveVariantsDirective, isStandalone: true, selector: "[moveVariants]", inputs: { moveVariants: { classPropertyName: "moveVariants", publicName: "moveVariants", isSignal: true, isRequired: true, transformFunction: null }, moveAnimate: { classPropertyName: "moveAnimate", publicName: "moveAnimate", 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 }, moveDisabled: { classPropertyName: "moveDisabled", publicName: "moveDisabled", isSignal: true, isRequired: false, transformFunction: null }, moveSpring: { classPropertyName: "moveSpring", publicName: "moveSpring", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
-            {
-                provide: MOVE_VARIANTS_PARENT,
-                useExisting: forwardRef(() => MoveVariantsDirective),
-            },
-        ], ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: MoveVariantsDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[moveVariants]',
-                    providers: [
-                        {
-                            provide: MOVE_VARIANTS_PARENT,
-                            useExisting: forwardRef(() => MoveVariantsDirective),
-                        },
-                    ],
-                }]
-        }], ctorParameters: () => [], propDecorators: { moveVariants: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveVariants", required: true }] }], moveAnimate: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveAnimate", 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 }] }] } });
-
 class MoveStaggerDirective {
     moveStagger = input.required(...(ngDevMode ? [{ debugName: "moveStagger" }] : /* istanbul ignore next */ []));
     moveStaggerDirection = input('first', ...(ngDevMode ? [{ debugName: "moveStaggerDirection" }] : /* istanbul ignore next */ []));
@@ -1029,7 +1104,11 @@ class MoveLayoutDirective {
                     this.#isAnimating) {
                     return null;
                 }
-                const currentRect = this.#host.nativeElement.getBoundingClientRect();
+                const el = this.#host.nativeElement;
+                if (typeof el.getBoundingClientRect !== 'function') {
+                    return null;
+                }
+                const currentRect = el.getBoundingClientRect();
                 if (this.#snapshot) {
                     const dx = this.#snapshot.left - currentRect.left;
                     const dy = this.#snapshot.top - currentRect.top;
@@ -1338,7 +1417,7 @@ class MoveScrollDirective {
             if (!view)
                 return;
             this.#player = this.#engine.play(this.#host.nativeElement, keyframes, {
-                config: { duration: 1000, easing: 'linear', delay: 0, disabled: false },
+                config: { duration: 1000, easing: 'linear', delay: 0, disabled: false, iterations: 1 },
             });
             this.#player?.pause();
             // Sync the new player to the current scroll position immediately.
@@ -2101,7 +2180,7 @@ class MoveParallaxDirective {
         }
         this.#player?.cancel();
         this.#player = this.#engine.play(this.#host.nativeElement, frames, {
-            config: { duration: 1000, delay: 0, easing: 'linear', disabled: false },
+            config: { duration: 1000, delay: 0, easing: 'linear', disabled: false, iterations: 1 },
         });
         this.#player?.pause();
         if (this.#player) {
@@ -2146,6 +2225,51 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImpor
                 }]
         }], ctorParameters: () => [], propDecorators: { moveParallax: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveParallax", required: false }] }], moveParallaxAxis: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveParallaxAxis", required: false }] }] } });
 
+class MoveLoopDirective {
+    moveLoop = input('none', ...(ngDevMode ? [{ debugName: "moveLoop" }] : /* istanbul ignore next */ []));
+    moveDuration = input(undefined, ...(ngDevMode ? [{ debugName: "moveDuration" }] : /* istanbul ignore next */ []));
+    moveEasing = input(undefined, ...(ngDevMode ? [{ debugName: "moveEasing" }] : /* istanbul ignore next */ []));
+    moveDelay = input(undefined, ...(ngDevMode ? [{ debugName: "moveDelay" }] : /* istanbul ignore next */ []));
+    moveDisabled = input(undefined, ...(ngDevMode ? [{ debugName: "moveDisabled" }] : /* istanbul ignore next */ []));
+    moveSpring = input(undefined, ...(ngDevMode ? [{ debugName: "moveSpring" }] : /* istanbul ignore next */ []));
+    #defaults = inject(MOVEMENT_CONFIG);
+    #documentRef = inject(DOCUMENT);
+    #host = inject((ElementRef));
+    #engine = inject(AnimationEngine);
+    #player = null;
+    ngOnInit() {
+        const frames = resolveMoveFrames(this.moveLoop(), 'loop');
+        // Skip noop presets to avoid creating an infinite animation that does nothing
+        if (this.moveLoop() === 'none' || Object.keys(frames).length === 0) {
+            return;
+        }
+        const isReduced = prefersReducedMotion(this.#documentRef);
+        const config = resolveMovementConfig(this.#defaults, {
+            duration: this.moveDuration(),
+            easing: this.moveEasing(),
+            delay: this.moveDelay(),
+            disabled: this.moveDisabled(),
+        }, isReduced);
+        this.#player = this.#engine.play(this.#host.nativeElement, frames, {
+            config,
+            spring: this.moveSpring(),
+            disabled: config.disabled,
+            iterations: Infinity,
+        });
+    }
+    ngOnDestroy() {
+        this.#player?.cancel();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: MoveLoopDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.2", type: MoveLoopDirective, isStandalone: true, selector: "[moveLoop]", inputs: { moveLoop: { classPropertyName: "moveLoop", publicName: "moveLoop", 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 }, moveDisabled: { classPropertyName: "moveDisabled", publicName: "moveDisabled", isSignal: true, isRequired: false, transformFunction: null }, moveSpring: { classPropertyName: "moveSpring", publicName: "moveSpring", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: MoveLoopDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[moveLoop]',
+                }]
+        }], 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 provideMovement(config = {}) {
     return makeEnvironmentProviders([
         {
@@ -2176,6 +2300,7 @@ const MOVEMENT_DIRECTIVES = [
     MoveFocusDirective,
     MoveParallaxDirective,
     MoveAnimationDirective,
+    MoveLoopDirective,
 ];
 
 /*
@@ -2186,5 +2311,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, MoveParallaxDirective, MovePresenceDirective, MoveScrollDirective, MoveSmoothScrollDirective, MoveStaggerDirective, MoveTapDirective, MoveTextDirective, MoveVariantsDirective, SmoothScrollService, SpringPlayer, WaapiPlayer, provideMovement };
+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, MoveTextDirective, MoveVariantsDirective, SmoothScrollService, SpringPlayer, WaapiPlayer, applyInitialStyles, clearInitialStyles, prefersReducedMotion, provideMovement, resolveMoveFrames, resolveMovementConfig, reverseFrames };
 //# sourceMappingURL=angular-movement.mjs.map