animejs 4.2.0-beta.0 → 4.2.0

package/dist/modules/easings/{steps.js → steps/index.js}

@@ -5,12 +5,12 @@
  * @copyright 2025 - Julian Garnier
  */
 
-import { ceil, floor, clamp } from '../core/helpers.js';
+import { ceil, floor, clamp } from '../../core/helpers.js';
 
 /**
  * @import {
  *   EasingFunction,
- * } from '../types/index.js'
+ * } from '../../types/index.js'
 */
 
 /**

package/dist/modules/events/scroll.cjs

@@ -17,7 +17,7 @@ var timer = require('../timer/timer.cjs');
 var target = require('../utils/target.cjs');
 var time = require('../utils/time.cjs');
 var none = require('../easings/none.cjs');
-var eases = require('../easings/eases.cjs');
+var parser = require('../easings/eases/parser.cjs');
 
 /**
  * @import {
@@ -368,7 +368,7 @@ class ScrollObserver {
   constructor(parameters = {}) {
     if (globals.scope.current) globals.scope.current.register(this);
     const syncMode = values.setValue(parameters.sync, 'play pause');
-    const ease = syncMode ? eases.parseEase(/** @type {EasingParam} */(syncMode)) : null;
+    const ease = syncMode ? parser.parseEase(/** @type {EasingParam} */(syncMode)) : null;
     const isLinear = syncMode && (syncMode === 'linear' || syncMode === none.none);
     const isEase = syncMode && !(ease === none.none && !isLinear);
     const isSmooth = syncMode && (helpers.isNum(syncMode) || syncMode === true || isLinear);
@@ -435,6 +435,8 @@ class ScrollObserver {
     /** @type {Boolean} */
     this.reverted = false;
     /** @type {Boolean} */
+    this.ready = false;
+    /** @type {Boolean} */
     this.completed = false;
     /** @type {Boolean} */
     this.began = false;
@@ -444,8 +446,6 @@ class ScrollObserver {
     this.forceEnter = false;
     /** @type {Boolean} */
     this.hasEntered = false;
-    // /** @type {Array.<Number>} */
-    // this.offsets = [];
     /** @type {Number} */
     this.offset = 0;
     /** @type {Number} */
@@ -493,6 +493,8 @@ class ScrollObserver {
       // Make sure to pause the linked object in case it's added later
       linked.pause();
       this.linked = linked;
+      // Forces WAAPI Animation to persist; otherwise, they will stop syncing on finish.
+      if (!helpers.isUnd(/** @type {WAAPIAnimation} */(linked))) /** @type {WAAPIAnimation} */(linked).persist = true;
       // Try to use a target of the linked object if no target parameters specified
       if (!this._params.target) {
         /** @type {HTMLElement} */
@@ -532,6 +534,8 @@ class ScrollObserver {
   }
 
   refresh() {
+    // This flag is used to prevent running handleScroll() outside of this.refresh() with values not yet calculated
+    this.ready = true;
     this.reverted = false;
     const params = this._params;
     this.repeat = values.setValue(parseScrollObserverFunctionParameter(params.repeat, this), true);
@@ -777,8 +781,6 @@ class ScrollObserver {
     const offsetStart = parsedEnterTarget + offset - parsedEnterContainer;
     const offsetEnd = parsedLeaveTarget + offset - parsedLeaveContainer;
     const scrollDelta = offsetEnd - offsetStart;
-    // this.offsets[0] = offsetX;
-    // this.offsets[1] = offsetY;
     this.offset = offset;
     this.offsetStart = offsetStart;
     this.offsetEnd = offsetEnd;
@@ -797,6 +799,7 @@ class ScrollObserver {
   }
 
   handleScroll() {
+    if (!this.ready) return;
     const linked = this.linked;
     const sync = this.sync;
     const syncEase = this.syncEase;
@@ -920,6 +923,7 @@ class ScrollObserver {
       this.removeDebug();
     }
     this.reverted = true;
+    this.ready = false;
     return this;
   }
 

package/dist/modules/events/scroll.d.ts

@@ -59,6 +59,8 @@ export class ScrollObserver {
     /** @type {Boolean} */
     reverted: boolean;
     /** @type {Boolean} */
+    ready: boolean;
+    /** @type {Boolean} */
     completed: boolean;
     /** @type {Boolean} */
     began: boolean;

package/dist/modules/events/scroll.js

@@ -15,7 +15,7 @@ import { Timer } from '../timer/timer.js';
 import { get, set } from '../utils/target.js';
 import { sync } from '../utils/time.js';
 import { none } from '../easings/none.js';
-import { parseEase } from '../easings/eases.js';
+import { parseEase } from '../easings/eases/parser.js';
 
 /**
  * @import {
@@ -433,6 +433,8 @@ class ScrollObserver {
     /** @type {Boolean} */
     this.reverted = false;
     /** @type {Boolean} */
+    this.ready = false;
+    /** @type {Boolean} */
     this.completed = false;
     /** @type {Boolean} */
     this.began = false;
@@ -442,8 +444,6 @@ class ScrollObserver {
     this.forceEnter = false;
     /** @type {Boolean} */
     this.hasEntered = false;
-    // /** @type {Array.<Number>} */
-    // this.offsets = [];
     /** @type {Number} */
     this.offset = 0;
     /** @type {Number} */
@@ -491,6 +491,8 @@ class ScrollObserver {
       // Make sure to pause the linked object in case it's added later
       linked.pause();
       this.linked = linked;
+      // Forces WAAPI Animation to persist; otherwise, they will stop syncing on finish.
+      if (!isUnd(/** @type {WAAPIAnimation} */(linked))) /** @type {WAAPIAnimation} */(linked).persist = true;
       // Try to use a target of the linked object if no target parameters specified
       if (!this._params.target) {
         /** @type {HTMLElement} */
@@ -530,6 +532,8 @@ class ScrollObserver {
   }
 
   refresh() {
+    // This flag is used to prevent running handleScroll() outside of this.refresh() with values not yet calculated
+    this.ready = true;
     this.reverted = false;
     const params = this._params;
     this.repeat = setValue(parseScrollObserverFunctionParameter(params.repeat, this), true);
@@ -775,8 +779,6 @@ class ScrollObserver {
     const offsetStart = parsedEnterTarget + offset - parsedEnterContainer;
     const offsetEnd = parsedLeaveTarget + offset - parsedLeaveContainer;
     const scrollDelta = offsetEnd - offsetStart;
-    // this.offsets[0] = offsetX;
-    // this.offsets[1] = offsetY;
     this.offset = offset;
     this.offsetStart = offsetStart;
     this.offsetEnd = offsetEnd;
@@ -795,6 +797,7 @@ class ScrollObserver {
   }
 
   handleScroll() {
+    if (!this.ready) return;
     const linked = this.linked;
     const sync = this.sync;
     const syncEase = this.syncEase;
@@ -918,6 +921,7 @@ class ScrollObserver {
       this.removeDebug();
     }
     this.reverted = true;
+    this.ready = false;
     return this;
   }
 

package/dist/modules/index.cjs

@@ -14,19 +14,18 @@ var animatable = require('./animatable/animatable.cjs');
 var draggable = require('./draggable/draggable.cjs');
 var scope = require('./scope/scope.cjs');
 var scroll = require('./events/scroll.cjs');
-var spring = require('./spring/spring.cjs');
 var engine = require('./engine/engine.cjs');
 var index = require('./easings/index.cjs');
 var index$1 = require('./utils/index.cjs');
 var index$2 = require('./svg/index.cjs');
 var index$3 = require('./text/index.cjs');
 var waapi = require('./waapi/waapi.cjs');
-var none = require('./easings/none.cjs');
-var cubicBezier = require('./easings/cubic-bezier.cjs');
-var steps = require('./easings/steps.cjs');
-var linear = require('./easings/linear.cjs');
-var irregular = require('./easings/irregular.cjs');
-var eases = require('./easings/eases.cjs');
+var index$4 = require('./easings/cubic-bezier/index.cjs');
+var index$5 = require('./easings/steps/index.cjs');
+var index$6 = require('./easings/linear/index.cjs');
+var index$7 = require('./easings/irregular/index.cjs');
+var index$8 = require('./easings/spring/index.cjs');
+var parser = require('./easings/eases/parser.cjs');
 var chainable = require('./utils/chainable.cjs');
 var random = require('./utils/random.cjs');
 var time = require('./utils/time.cjs');
@@ -56,8 +55,6 @@ exports.createScope = scope.createScope;
 exports.ScrollObserver = scroll.ScrollObserver;
 exports.onScroll = scroll.onScroll;
 exports.scrollContainers = scroll.scrollContainers;
-exports.Spring = spring.Spring;
-exports.createSpring = spring.createSpring;
 exports.engine = engine.engine;
 exports.easings = index;
 exports.utils = index$1;
@@ -65,12 +62,14 @@ exports.svg = index$2;
 exports.text = index$3;
 exports.WAAPIAnimation = waapi.WAAPIAnimation;
 exports.waapi = waapi.waapi;
-exports.none = none.none;
-exports.cubicBezier = cubicBezier.cubicBezier;
-exports.steps = steps.steps;
-exports.linear = linear.linear;
-exports.irregular = irregular.irregular;
-exports.eases = eases.eases;
+exports.cubicBezier = index$4.cubicBezier;
+exports.steps = index$5.steps;
+exports.linear = index$6.linear;
+exports.irregular = index$7.irregular;
+exports.Spring = index$8.Spring;
+exports.createSpring = index$8.createSpring;
+exports.spring = index$8.spring;
+exports.eases = parser.eases;
 exports.clamp = chainable.clamp;
 exports.damp = chainable.damp;
 exports.degToRad = chainable.degToRad;

package/dist/modules/index.d.ts

@@ -5,7 +5,6 @@ export * from "./animatable/index.js";
 export * from "./draggable/index.js";
 export * from "./scope/index.js";
 export * from "./events/index.js";
-export * from "./spring/index.js";
 export * from "./engine/index.js";
 export * from "./easings/index.js";
 export * from "./utils/index.js";

package/dist/modules/index.js

@@ -12,7 +12,6 @@ export { Animatable, createAnimatable } from './animatable/animatable.js';
 export { Draggable, createDraggable } from './draggable/draggable.js';
 export { Scope, createScope } from './scope/scope.js';
 export { ScrollObserver, onScroll, scrollContainers } from './events/scroll.js';
-export { Spring, createSpring } from './spring/spring.js';
 export { engine } from './engine/engine.js';
 import * as index from './easings/index.js';
 export { index as easings };
@@ -23,12 +22,12 @@ export { index$2 as svg };
 import * as index$3 from './text/index.js';
 export { index$3 as text };
 export { WAAPIAnimation, waapi } from './waapi/waapi.js';
-export { none } from './easings/none.js';
-export { cubicBezier } from './easings/cubic-bezier.js';
-export { steps } from './easings/steps.js';
-export { linear } from './easings/linear.js';
-export { irregular } from './easings/irregular.js';
-export { eases } from './easings/eases.js';
+export { cubicBezier } from './easings/cubic-bezier/index.js';
+export { steps } from './easings/steps/index.js';
+export { linear } from './easings/linear/index.js';
+export { irregular } from './easings/irregular/index.js';
+export { Spring, createSpring, spring } from './easings/spring/index.js';
+export { eases } from './easings/eases/parser.js';
 export { clamp, damp, degToRad, lerp, mapRange, padEnd, padStart, radToDeg, round, roundPad, snap, wrap } from './utils/chainable.js';
 export { createSeededRandom, random, randomPick, shuffle } from './utils/random.js';
 export { keepTime, sync } from './utils/time.js';

package/dist/modules/timeline/timeline.cjs

@@ -17,7 +17,7 @@ var styles = require('../core/styles.cjs');
 var composition = require('../animation/composition.cjs');
 var animation = require('../animation/animation.cjs');
 var timer = require('../timer/timer.cjs');
-var eases = require('../easings/eases.cjs');
+var parser = require('../easings/eases/parser.cjs');
 var position = require('./position.cjs');
 
 /**
@@ -111,7 +111,7 @@ class Timeline extends timer.Timer {
     /** @type {Callback<this>} */
     this.onRender = parameters.onRender || globalDefaults.onRender;
     const tlPlaybackEase = values.setValue(parameters.playbackEase, globalDefaults.playbackEase);
-    this._ease = tlPlaybackEase ? eases.parseEase(tlPlaybackEase) : null;
+    this._ease = tlPlaybackEase ? parser.parseEase(tlPlaybackEase) : null;
     /** @type {Number} */
     this.iterationDuration = 0;
   }

package/dist/modules/timeline/timeline.js

@@ -15,7 +15,7 @@ import { cleanInlineStyles } from '../core/styles.js';
 import { removeTargetsFromRenderable } from '../animation/composition.js';
 import { JSAnimation } from '../animation/animation.js';
 import { Timer } from '../timer/timer.js';
-import { parseEase } from '../easings/eases.js';
+import { parseEase } from '../easings/eases/parser.js';
 import { parseTimelinePosition } from './position.js';
 
 /**

package/dist/modules/types/index.d.ts

@@ -7,6 +7,7 @@ export type DefaultsParams = {
     loop?: number | boolean;
     reversed?: boolean;
     alternate?: boolean;
+    persist?: boolean;
     autoplay?: boolean | ScrollObserver;
     duration?: number | FunctionValue;
     delay?: number | FunctionValue;
@@ -14,13 +15,13 @@ export type DefaultsParams = {
     ease?: EasingParam;
     composition?: "none" | "replace" | "blend" | compositionTypes;
     modifier?: (v: any) => any;
-    onBegin?: (tickable: Tickable) => void;
-    onBeforeUpdate?: (tickable: Tickable) => void;
-    onUpdate?: (tickable: Tickable) => void;
-    onLoop?: (tickable: Tickable) => void;
-    onPause?: (tickable: Tickable) => void;
-    onComplete?: (tickable: Tickable) => void;
-    onRender?: (renderable: Renderable) => void;
+    onBegin?: Callback<Tickable>;
+    onBeforeUpdate?: Callback<Tickable>;
+    onUpdate?: Callback<Tickable>;
+    onLoop?: Callback<Tickable>;
+    onPause?: Callback<Tickable>;
+    onComplete?: Callback<Tickable>;
+    onRender?: Callback<Renderable>;
 };
 export type Renderable = JSAnimation | Timeline;
 export type Tickable = Timer | Renderable;
@@ -50,12 +51,14 @@ export type JSTargetsArray = Array<JSTarget>;
 export type TargetsParam = Array<TargetSelector> | TargetSelector;
 export type TargetsArray = Array<Target>;
 export type EasingFunction = (time: number) => number;
-export type EaseStringParamNames = ("linear" | "linear(x1, x2 25%, x3)" | "in" | "out" | "inOut" | "inQuad" | "outQuad" | "inOutQuad" | "inCubic" | "outCubic" | "inOutCubic" | "inQuart" | "outQuart" | "inOutQuart" | "inQuint" | "outQuint" | "inOutQuint" | "inSine" | "outSine" | "inOutSine" | "inCirc" | "outCirc" | "inOutCirc" | "inExpo" | "outExpo" | "inOutExpo" | "inBounce" | "outBounce" | "inOutBounce" | "inBack" | "outBack" | "inOutBack" | "inElastic" | "outElastic" | "inOutElastic" | "irregular" | "cubicBezier" | "steps" | "in(p = 1.675)" | "out(p = 1.675)" | "inOut(p = 1.675)" | "inBack(overshoot = 1.70158)" | "outBack(overshoot = 1.70158)" | "inOutBack(overshoot = 1.70158)" | "inElastic(amplitude = 1, period = .3)" | "outElastic(amplitude = 1, period = .3)" | "inOutElastic(amplitude = 1, period = .3)" | "irregular(length = 10, randomness = 1)" | "cubicBezier(x1, y1, x2, y2)" | "steps(steps = 10)");
+export type EaseStringParamNames = ("linear" | "none" | "in" | "out" | "inOut" | "inQuad" | "outQuad" | "inOutQuad" | "inCubic" | "outCubic" | "inOutCubic" | "inQuart" | "outQuart" | "inOutQuart" | "inQuint" | "outQuint" | "inOutQuint" | "inSine" | "outSine" | "inOutSine" | "inCirc" | "outCirc" | "inOutCirc" | "inExpo" | "outExpo" | "inOutExpo" | "inBounce" | "outBounce" | "inOutBounce" | "inBack" | "outBack" | "inOutBack" | "inElastic" | "outElastic" | "inOutElastic" | "out(p = 1.675)" | "inOut(p = 1.675)" | "inBack(overshoot = 1.7)" | "outBack(overshoot = 1.7)" | "inOutBack(overshoot = 1.7)" | "inElastic(amplitude = 1, period = .3)" | "outElastic(amplitude = 1, period = .3)" | "inOutElastic(amplitude = 1, period = .3)");
+export type WAAPIEaseStringParamNames = ("ease" | "ease-in" | "ease-out" | "ease-in-out" | "linear(0, 0.25, 1)" | "steps" | "steps(6, start)" | "step-start" | "step-end" | "cubic-bezier(0.42, 0, 1, 1)");
 export type PowerEasing = (power?: number | string) => EasingFunction;
 export type BackEasing = (overshoot?: number | string) => EasingFunction;
 export type ElasticEasing = (amplitude?: number | string, period?: number | string) => EasingFunction;
 export type EasingFunctionWithParams = PowerEasing | BackEasing | ElasticEasing;
 export type EasingParam = (string & {}) | EaseStringParamNames | EasingFunction | Spring;
+export type WAAPIEasingParam = (string & {}) | EaseStringParamNames | WAAPIEaseStringParamNames | EasingFunction | Spring;
 export type SpringParams = {
     /**
      * - Mass, default 1
@@ -73,6 +76,18 @@ export type SpringParams = {
      * - Initial velocity, default 0
      */
     velocity?: number;
+    /**
+     * - Initial bounce, default 0
+     */
+    bounce?: number;
+    /**
+     * - The perceived duration, default 0
+     */
+    duration?: number;
+    /**
+     * - Callback function called when the spring currentTime hits the perceived duration
+     */
+    onComplete?: Callback<JSAnimation>;
 };
 export type Callback<T> = (self: T, e?: PointerEvent) => any;
 export type TickableCallbacks<T extends unknown> = {
@@ -131,6 +146,7 @@ export type Tween = {
     _isOverlapped: number;
     _isOverridden: number;
     _renderTransforms: number;
+    _inlineValue: string;
     _prevRep: Tween;
     _nextRep: Tween;
     _prevAdd: Tween;
@@ -238,13 +254,13 @@ export type TimelineParams = TimerOptions & TimelineOptions & TickableCallbacks<
 export type WAAPITweenValue = string | number | Array<string> | Array<number>;
 export type WAAPIFunctionValue = (target: DOMTarget, index: number, length: number) => WAAPITweenValue;
 export type WAAPIKeyframeValue = WAAPITweenValue | WAAPIFunctionValue | Array<string | number | WAAPIFunctionValue>;
-export type WAAPICallback = (animation: WAAPIAnimation) => void;
+export type WAAPICallback = Callback<WAAPIAnimation>;
 export type WAAPITweenOptions = {
     to?: WAAPIKeyframeValue;
     from?: WAAPIKeyframeValue;
     duration?: number | WAAPIFunctionValue;
     delay?: number | WAAPIFunctionValue;
-    ease?: EasingParam;
+    ease?: WAAPIEasingParam;
     composition?: CompositeOperation;
 };
 export type WAAPIAnimationOptions = {
@@ -255,11 +271,12 @@ export type WAAPIAnimationOptions = {
     playbackRate?: number;
     duration?: number | WAAPIFunctionValue;
     delay?: number | WAAPIFunctionValue;
-    ease?: EasingParam;
+    ease?: WAAPIEasingParam;
     composition?: CompositeOperation;
+    persist?: boolean;
     onComplete?: WAAPICallback;
 };
-export type WAAPIAnimationParams = Record<string, WAAPIKeyframeValue | WAAPIAnimationOptions | boolean | ScrollObserver | WAAPICallback | EasingParam | WAAPITweenOptions> & WAAPIAnimationOptions;
+export type WAAPIAnimationParams = Record<string, WAAPIKeyframeValue | WAAPIAnimationOptions | boolean | ScrollObserver | WAAPICallback | WAAPIEasingParam | WAAPITweenOptions> & WAAPIAnimationOptions;
 export type AnimatablePropertySetter = (to: number | Array<number>, duration?: number, ease?: EasingParam) => AnimatableObject;
 export type AnimatablePropertyGetter = () => number | Array<number>;
 export type AnimatableProperty = AnimatablePropertySetter & AnimatablePropertyGetter;
@@ -382,6 +399,6 @@ import type { WAAPIAnimation } from '../waapi/waapi.js';
 import type { Draggable } from '../draggable/draggable.js';
 import type { TextSplitter } from '../text/split.js';
 import type { Scope } from '../scope/scope.js';
-import type { Spring } from '../spring/spring.js';
+import type { Spring } from '../easings/spring/index.js';
 import type { tweenTypes } from '../core/consts.js';
 import type { valueTypes } from '../core/consts.js';

package/dist/modules/utils/stagger.cjs

@@ -9,7 +9,7 @@
 
 var consts = require('../core/consts.cjs');
 var helpers = require('../core/helpers.cjs');
-var eases = require('../easings/eases.cjs');
+var parser = require('../easings/eases/parser.cjs');
 var position = require('../timeline/position.cjs');
 var values = require('../core/values.cjs');
 var targets = require('../core/targets.cjs');
@@ -25,7 +25,7 @@ var random = require('./random.cjs');
 /**
  * @import {
  *   Spring,
- * } from '../spring/spring.js'
+ * } from '../easings/spring/index.js'
 */
 
 /**
@@ -65,7 +65,7 @@ const stagger = (val, params = {}) => {
   const ease = params.ease;
   const hasEasing = !helpers.isUnd(ease);
   const hasSpring = hasEasing && !helpers.isUnd(/** @type {Spring} */(ease).ease);
-  const staggerEase = hasSpring ? /** @type {Spring} */(ease).ease : hasEasing ? eases.parseEase(ease) : null;
+  const staggerEase = hasSpring ? /** @type {Spring} */(ease).ease : hasEasing ? parser.parseEase(ease) : null;
   const grid = params.grid;
   const axis = params.axis;
   const customTotal = params.total;

package/dist/modules/utils/stagger.js

@@ -7,7 +7,7 @@
 
 import { unitsExecRgx, emptyString } from '../core/consts.js';
 import { isUnd, parseNumber, isFnc, abs, floor, sqrt, round, isArr, isNum, isStr, max } from '../core/helpers.js';
-import { parseEase } from '../easings/eases.js';
+import { parseEase } from '../easings/eases/parser.js';
 import { parseTimelinePosition } from '../timeline/position.js';
 import { getOriginalAnimatableValue } from '../core/values.js';
 import { registerTargets } from '../core/targets.js';
@@ -23,7 +23,7 @@ import { shuffle } from './random.js';
 /**
  * @import {
  *   Spring,
- * } from '../spring/spring.js'
+ * } from '../easings/spring/index.js'
 */
 
 /**

package/dist/modules/waapi/composition.cjs

@@ -30,16 +30,18 @@ const WAAPIAnimationsLookups = {
  * @param {DOMTarget} $el
  * @param {String} [property]
  * @param {WAAPIAnimation} [parent]
+ * @return {globalThis.Animation}
  */
 const removeWAAPIAnimation = ($el, property, parent) => {
   let nextLookup = WAAPIAnimationsLookups._head;
+  let anim;
   while (nextLookup) {
     const next = nextLookup._next;
     const matchTarget = nextLookup.$el === $el;
     const matchProperty = !property || nextLookup.property === property;
     const matchParent = !parent || nextLookup.parent === parent;
     if (matchTarget && matchProperty && matchParent) {
-      const anim = nextLookup.animation;
+      anim = nextLookup.animation;
       try { anim.commitStyles(); } catch {}      anim.cancel();
       helpers.removeChild(WAAPIAnimationsLookups, nextLookup);
       const lookupParent = nextLookup.parent;
@@ -47,8 +49,8 @@ const removeWAAPIAnimation = ($el, property, parent) => {
         lookupParent._completed++;
         if (lookupParent.animations.length === lookupParent._completed) {
           lookupParent.completed = true;
+          lookupParent.paused = true;
           if (!lookupParent.muteCallbacks) {
-            lookupParent.paused = true;
             lookupParent.onComplete(lookupParent);
             lookupParent._resolve(lookupParent);
           }
@@ -57,6 +59,7 @@ const removeWAAPIAnimation = ($el, property, parent) => {
     }
     nextLookup = next;
   }
+  return anim;
 };
 
 /**
@@ -65,7 +68,7 @@ const removeWAAPIAnimation = ($el, property, parent) => {
  * @param {String} property
  * @param {PropertyIndexedKeyframes} keyframes
  * @param {KeyframeAnimationOptions} params
- * @retun {Animation}
+ * @retun {globalThis.Animation}
  */
 const addWAAPIAnimation = (parent, $el, property, keyframes, params) => {
   const animation = $el.animate(keyframes, params);
@@ -80,8 +83,11 @@ const addWAAPIAnimation = (parent, $el, property, keyframes, params) => {
   removeWAAPIAnimation($el, property);
   helpers.addChild(WAAPIAnimationsLookups, { parent, animation, $el, property, _next: null, _prev: null });
   const handleRemove = () => { removeWAAPIAnimation($el, property, parent); };
+  animation.oncancel = handleRemove;
   animation.onremove = handleRemove;
-  animation.onfinish = handleRemove;
+  if (!parent.persist) {
+    animation.onfinish = handleRemove;
+  }
   return animation;
 };
 

package/dist/modules/waapi/composition.d.ts

@@ -1,4 +1,4 @@
-export function removeWAAPIAnimation($el: DOMTarget, property?: string, parent?: WAAPIAnimation): void;
+export function removeWAAPIAnimation($el: DOMTarget, property?: string, parent?: WAAPIAnimation): globalThis.Animation;
 export function addWAAPIAnimation(parent: WAAPIAnimation, $el: DOMTarget, property: string, keyframes: PropertyIndexedKeyframes, params: KeyframeAnimationOptions): Animation;
 import type { DOMTarget } from '../types/index.js';
 import type { WAAPIAnimation } from '../waapi/waapi.js';

package/dist/modules/waapi/composition.js

@@ -28,16 +28,18 @@ const WAAPIAnimationsLookups = {
  * @param {DOMTarget} $el
  * @param {String} [property]
  * @param {WAAPIAnimation} [parent]
+ * @return {globalThis.Animation}
  */
 const removeWAAPIAnimation = ($el, property, parent) => {
   let nextLookup = WAAPIAnimationsLookups._head;
+  let anim;
   while (nextLookup) {
     const next = nextLookup._next;
     const matchTarget = nextLookup.$el === $el;
     const matchProperty = !property || nextLookup.property === property;
     const matchParent = !parent || nextLookup.parent === parent;
     if (matchTarget && matchProperty && matchParent) {
-      const anim = nextLookup.animation;
+      anim = nextLookup.animation;
       try { anim.commitStyles(); } catch {}      anim.cancel();
       removeChild(WAAPIAnimationsLookups, nextLookup);
       const lookupParent = nextLookup.parent;
@@ -45,8 +47,8 @@ const removeWAAPIAnimation = ($el, property, parent) => {
         lookupParent._completed++;
         if (lookupParent.animations.length === lookupParent._completed) {
           lookupParent.completed = true;
+          lookupParent.paused = true;
           if (!lookupParent.muteCallbacks) {
-            lookupParent.paused = true;
             lookupParent.onComplete(lookupParent);
             lookupParent._resolve(lookupParent);
           }
@@ -55,6 +57,7 @@ const removeWAAPIAnimation = ($el, property, parent) => {
     }
     nextLookup = next;
   }
+  return anim;
 };
 
 /**
@@ -63,7 +66,7 @@ const removeWAAPIAnimation = ($el, property, parent) => {
  * @param {String} property
  * @param {PropertyIndexedKeyframes} keyframes
  * @param {KeyframeAnimationOptions} params
- * @retun {Animation}
+ * @retun {globalThis.Animation}
  */
 const addWAAPIAnimation = (parent, $el, property, keyframes, params) => {
   const animation = $el.animate(keyframes, params);
@@ -78,8 +81,11 @@ const addWAAPIAnimation = (parent, $el, property, keyframes, params) => {
   removeWAAPIAnimation($el, property);
   addChild(WAAPIAnimationsLookups, { parent, animation, $el, property, _next: null, _prev: null });
   const handleRemove = () => { removeWAAPIAnimation($el, property, parent); };
+  animation.oncancel = handleRemove;
   animation.onremove = handleRemove;
-  animation.onfinish = handleRemove;
+  if (!parent.persist) {
+    animation.onfinish = handleRemove;
+  }
   return animation;
 };