motion 12.6.3-alpha.0 → 12.6.4-alpha.0

package/dist/cjs/mini.js

@@ -8,10 +8,7 @@ function removeItem(arr, item) {
         arr.splice(index, 1);
 }
 
-/*#__NO_SIDE_EFFECTS__*/
-const noop = (any) => any;
-
-let invariant = noop;
+let invariant = () => { };
 if (process.env.NODE_ENV !== "production") {
     invariant = (check, message) => {
         if (!check) {
@@ -30,6 +27,9 @@ function memo(callback) {
     };
 }
 
+/*#__NO_SIDE_EFFECTS__*/
+const noop = (any) => any;
+
 /*
   Progress within given range
 
@@ -61,15 +61,14 @@ const millisecondsToSeconds = (milliseconds) => milliseconds / 1000;
 
 const supportsScrollTimeline = /* @__PURE__ */ memo(() => window.ScrollTimeline !== undefined);
 
-class BaseGroupPlaybackControls {
+class GroupAnimation {
     constructor(animations) {
         // Bound to accomodate common `return animation.stop` pattern
         this.stop = () => this.runAll("stop");
         this.animations = animations.filter(Boolean);
     }
     get finished() {
-        // Support for new finished Promise and legacy thennable API
-        return Promise.all(this.animations.map((animation) => "finished" in animation ? animation.finished : animation));
+        return Promise.all(this.animations.map((animation) => animation.finished));
     }
     /**
      * TODO: Filter out cancelled or stopped animations before returning
@@ -140,141 +139,104 @@ class BaseGroupPlaybackControls {
     }
 }
 
-/**
- * TODO: This is a temporary class to support the legacy
- * thennable API
- */
-class GroupPlaybackControls extends BaseGroupPlaybackControls {
-    then(onResolve, onReject) {
-        return Promise.all(this.animations).then(onResolve).catch(onReject);
+class GroupAnimationWithThen extends GroupAnimation {
+    then(onResolve, _onReject) {
+        return this.finished.finally(onResolve).then(() => { });
     }
 }
 
-function getValueTransition$1(transition, key) {
-    return transition
-        ? transition[key] ||
-            transition["default"] ||
-            transition
-        : undefined;
-}
-
-/**
- * Implement a practical max duration for keyframe generation
- * to prevent infinite loops
- */
-const maxGeneratorDuration = 20000;
-function calcGeneratorDuration(generator) {
-    let duration = 0;
-    const timeStep = 50;
-    let state = generator.next(duration);
-    while (!state.done && duration < maxGeneratorDuration) {
-        duration += timeStep;
-        state = generator.next(duration);
-    }
-    return duration >= maxGeneratorDuration ? Infinity : duration;
-}
-
-/**
- * Create a progress => progress easing function from a generator.
- */
-function createGeneratorEasing(options, scale = 100, createGenerator) {
-    const generator = createGenerator({ ...options, keyframes: [0, scale] });
-    const duration = Math.min(calcGeneratorDuration(generator), maxGeneratorDuration);
-    return {
-        type: "keyframes",
-        ease: (progress) => {
-            return generator.next(duration * progress).value / scale;
-        },
-        duration: millisecondsToSeconds(duration),
-    };
-}
-
-function isGenerator(type) {
-    return typeof type === "function";
-}
+const isCSSVar = (name) => name.startsWith("--");
+const style = {
+    set: (element, name, value) => {
+        isCSSVar(name)
+            ? element.style.setProperty(name, value)
+            : (element.style[name] = value);
+    },
+    get: (element, name) => {
+        return isCSSVar(name)
+            ? element.style.getPropertyValue(name)
+            : element.style[name];
+    },
+};
 
-function attachTimeline(animation, timeline) {
-    animation.timeline = timeline;
-    animation.onfinish = null;
+const isNotNull = (value) => value !== null;
+function getFinalKeyframe(keyframes, { repeat, repeatType = "loop" }, finalKeyframe) {
+    const resolvedKeyframes = keyframes.filter(isNotNull);
+    const index = repeat && repeatType !== "loop" && repeat % 2 === 1
+        ? 0
+        : resolvedKeyframes.length - 1;
+    return !index || finalKeyframe === undefined
+        ? resolvedKeyframes[index]
+        : finalKeyframe;
 }
 
-class NativeAnimationControls {
-    constructor(animation) {
-        this.animation = animation;
-    }
-    get duration() {
-        var _a, _b, _c;
-        const durationInMs = ((_b = (_a = this.animation) === null || _a === void 0 ? void 0 : _a.effect) === null || _b === void 0 ? void 0 : _b.getComputedTiming().duration) ||
-            ((_c = this.options) === null || _c === void 0 ? void 0 : _c.duration) ||
-            300;
-        return millisecondsToSeconds(Number(durationInMs));
-    }
-    get time() {
-        var _a;
-        if (this.animation) {
-            return millisecondsToSeconds(((_a = this.animation) === null || _a === void 0 ? void 0 : _a.currentTime) || 0);
-        }
-        return 0;
-    }
-    set time(newTime) {
-        if (this.animation) {
-            this.animation.currentTime = secondsToMilliseconds(newTime);
-        }
-    }
-    get speed() {
-        return this.animation ? this.animation.playbackRate : 1;
-    }
-    set speed(newSpeed) {
-        if (this.animation) {
-            this.animation.playbackRate = newSpeed;
-        }
-    }
-    get state() {
-        return this.animation ? this.animation.playState : "finished";
-    }
-    get startTime() {
-        return this.animation ? this.animation.startTime : null;
-    }
-    get finished() {
-        return this.animation ? this.animation.finished : Promise.resolve();
+const supportsPartialKeyframes = /*@__PURE__*/ memo(() => {
+    try {
+        document.createElement("div").animate({ opacity: [1] });
     }
-    play() {
-        this.animation && this.animation.play();
+    catch (e) {
+        return false;
     }
-    pause() {
-        this.animation && this.animation.pause();
+    return true;
+});
+
+const pxValues = new Set([
+    // Border props
+    "borderWidth",
+    "borderTopWidth",
+    "borderRightWidth",
+    "borderBottomWidth",
+    "borderLeftWidth",
+    "borderRadius",
+    "radius",
+    "borderTopLeftRadius",
+    "borderTopRightRadius",
+    "borderBottomRightRadius",
+    "borderBottomLeftRadius",
+    // Positioning props
+    "width",
+    "maxWidth",
+    "height",
+    "maxHeight",
+    "top",
+    "right",
+    "bottom",
+    "left",
+    // Spacing props
+    "padding",
+    "paddingTop",
+    "paddingRight",
+    "paddingBottom",
+    "paddingLeft",
+    "margin",
+    "marginTop",
+    "marginRight",
+    "marginBottom",
+    "marginLeft",
+    // Misc
+    "backgroundPositionX",
+    "backgroundPositionY",
+]);
+
+function hydrateKeyframes(element, name, keyframes, pseudoElement) {
+    if (!Array.isArray(keyframes)) {
+        keyframes = [keyframes];
     }
-    stop() {
-        if (!this.animation ||
-            this.state === "idle" ||
-            this.state === "finished") {
-            return;
+    for (let i = 0; i < keyframes.length; i++) {
+        if (keyframes[i] === null) {
+            keyframes[i] =
+                i === 0 && !pseudoElement
+                    ? style.get(element, name)
+                    : keyframes[i - 1];
         }
-        if (this.animation.commitStyles) {
-            this.animation.commitStyles();
+        if (typeof keyframes[i] === "number" && pxValues.has(name)) {
+            keyframes[i] = keyframes[i] + "px";
         }
-        this.cancel();
-    }
-    flatten() {
-        var _a, _b;
-        if (!this.animation || !((_a = this.options) === null || _a === void 0 ? void 0 : _a.allowFlatten))
-            return;
-        (_b = this.animation.effect) === null || _b === void 0 ? void 0 : _b.updateTiming({ easing: "linear" });
     }
-    attachTimeline(timeline) {
-        if (this.animation)
-            attachTimeline(this.animation, timeline);
-        return noop;
-    }
-    complete() {
-        this.animation && this.animation.finish();
-    }
-    cancel() {
-        try {
-            this.animation && this.animation.cancel();
-        }
-        catch (e) { }
+    if (!pseudoElement && !supportsPartialKeyframes() && keyframes.length < 2) {
+        keyframes.unshift(style.get(element, name));
     }
+    return keyframes;
 }
 
 const isBezierDefinition = (easing) => Array.isArray(easing) && typeof easing[0] === "number";
@@ -283,13 +245,11 @@ const isBezierDefinition = (easing) => Array.isArray(easing) && typeof easing[0]
  * Add the ability for test suites to manually set support flags
  * to better test more environments.
  */
-const supportsFlags = {
-    linearEasing: undefined,
-};
+const supportsFlags = {};
 
 function memoSupports(callback, supportsFlag) {
     const memoized = memo(callback);
-    return () => { var _a; return (_a = supportsFlags[supportsFlag]) !== null && _a !== void 0 ? _a : memoized(); };
+    return () => supportsFlags[supportsFlag] ?? memoized();
 }
 
 const supportsLinearEasing = /*@__PURE__*/ memoSupports(() => {
@@ -310,12 +270,13 @@ resolution = 10 // as milliseconds
     let points = "";
     const numPoints = Math.max(Math.round(duration / resolution), 2);
     for (let i = 0; i < numPoints; i++) {
-        points += easing(progress(0, numPoints - 1, i)) + ", ";
+        points += easing(i / (numPoints - 1)) + ", ";
     }
     return `linear(${points.substring(0, points.length - 2)})`;
 };
 
 const cubicBezierAsString = ([a, b, c, d]) => `cubic-bezier(${a}, ${b}, ${c}, ${d})`;
+
 const supportedWaapiEasing = {
     linear: "linear",
     ease: "ease",
@@ -327,6 +288,7 @@ const supportedWaapiEasing = {
     backIn: /*@__PURE__*/ cubicBezierAsString([0.31, 0.01, 0.66, -0.59]),
     backOut: /*@__PURE__*/ cubicBezierAsString([0.33, 1.53, 0.69, 0.99]),
 };
+
 function mapEasingToNativeEasing(easing, duration) {
     if (!easing) {
         return undefined;
@@ -346,22 +308,244 @@ function mapEasingToNativeEasing(easing, duration) {
     }
 }
 
+function startWaapiAnimation(element, valueName, keyframes, { delay = 0, duration = 300, repeat = 0, repeatType = "loop", ease = "easeInOut", times, } = {}, pseudoElement = undefined) {
+    const keyframeOptions = {
+        [valueName]: keyframes,
+    };
+    if (times)
+        keyframeOptions.offset = times;
+    const easing = mapEasingToNativeEasing(ease, duration);
+    /**
+     * If this is an easing array, apply to keyframes, not animation as a whole
+     */
+    if (Array.isArray(easing))
+        keyframeOptions.easing = easing;
+    const animation = element.animate(keyframeOptions, {
+        delay,
+        duration,
+        easing: !Array.isArray(easing) ? easing : "linear",
+        fill: "both",
+        iterations: repeat + 1,
+        direction: repeatType === "reverse" ? "alternate" : "normal",
+        pseudoElement,
+    });
+    return animation;
+}
+
+function isGenerator(type) {
+    return typeof type === "function" && "applyToOptions" in type;
+}
+
+function applyGeneratorOptions({ type, ...options }) {
+    if (isGenerator(type)) {
+        return type.applyToOptions(options);
+    }
+    else {
+        options.duration ?? (options.duration = 300);
+        options.ease ?? (options.ease = "easeOut");
+    }
+    return options;
+}
+
+const animationMaps = new WeakMap();
+const animationMapKey = (name, pseudoElement) => `${name}:${pseudoElement}`;
+function getAnimationMap(element) {
+    const map = animationMaps.get(element) || new Map();
+    animationMaps.set(element, map);
+    return map;
+}
+/**
+ * NativeAnimation implements AnimationPlaybackControls for the browser's Web Animations API.
+ */
+class NativeAnimation {
+    constructor(options) {
+        /**
+         * If we already have an animation, we don't need to instantiate one
+         * and can just use this as a controls interface.
+         */
+        if ("animation" in options) {
+            this.animation = options.animation;
+            return;
+        }
+        const { element, name, keyframes: unresolvedKeyframes, pseudoElement, allowFlatten = false, } = options;
+        let { transition } = options;
+        this.allowFlatten = allowFlatten;
+        /**
+         * Stop any existing animations on the element before reading existing keyframes.
+         *
+         * TODO: Check for VisualElement before using animation state. This is a fallback
+         * for mini animate(). Do this when implementing NativeAnimationExtended.
+         */
+        const animationMap = getAnimationMap(element);
+        const key = animationMapKey(name, pseudoElement || "");
+        const currentAnimation = animationMap.get(key);
+        currentAnimation && currentAnimation.stop();
+        /**
+         * TODO: If these keyframes aren't correctly hydrated then we want to throw
+         * run an instant animation.
+         */
+        const keyframes = hydrateKeyframes(element, name, unresolvedKeyframes, pseudoElement);
+        invariant(typeof transition.type !== "string", `animateMini doesn't support "type" as a string. Did you mean to import { spring } from "motion"?`);
+        transition = applyGeneratorOptions(transition);
+        this.animation = startWaapiAnimation(element, name, keyframes, transition, pseudoElement);
+        if (transition.autoplay === false) {
+            this.animation.pause();
+        }
+        this.removeAnimation = () => animationMap.delete(key);
+        this.animation.onfinish = () => {
+            if (!pseudoElement) {
+                style.set(element, name, getFinalKeyframe(keyframes, transition));
+            }
+            else {
+                this.commitStyles();
+            }
+            this.cancel();
+        };
+        /**
+         * TODO: Check for VisualElement before using animation state.
+         */
+        animationMap.set(key, this);
+    }
+    play() {
+        this.animation.play();
+    }
+    pause() {
+        this.animation.pause();
+    }
+    complete() {
+        this.animation.finish();
+    }
+    cancel() {
+        try {
+            this.animation.cancel();
+        }
+        catch (e) { }
+        this.removeAnimation();
+    }
+    stop() {
+        const { state } = this;
+        if (state === "idle" || state === "finished") {
+            return;
+        }
+        this.commitStyles();
+        this.cancel();
+    }
+    /**
+     * WAAPI doesn't natively have any interruption capabilities.
+     *
+     * In this method, we commit styles back to the DOM before cancelling
+     * the animation.
+     *
+     * This is designed to be overridden by NativeAnimationExtended, which
+     * will create a renderless JS animation and sample it twice to calculate
+     * its current value, "previous" value, and therefore allow
+     * Motion to also correctly calculate velocity for any subsequent animation
+     * while deferring the commit until the next animation frame.
+     */
+    commitStyles() {
+        this.animation.commitStyles?.();
+    }
+    get duration() {
+        console.log(this.animation.effect?.getComputedTiming());
+        const duration = this.animation.effect?.getComputedTiming().duration || 0;
+        return millisecondsToSeconds(Number(duration));
+    }
+    get time() {
+        return millisecondsToSeconds(Number(this.animation.currentTime) || 0);
+    }
+    set time(newTime) {
+        this.animation.currentTime = secondsToMilliseconds(newTime);
+    }
+    /**
+     * The playback speed of the animation.
+     * 1 = normal speed, 2 = double speed, 0.5 = half speed.
+     */
+    get speed() {
+        return this.animation.playbackRate;
+    }
+    set speed(newSpeed) {
+        this.animation.playbackRate = newSpeed;
+    }
+    get state() {
+        return this.animation.playState;
+    }
+    get startTime() {
+        return Number(this.animation.startTime);
+    }
+    get finished() {
+        return this.animation.finished;
+    }
+    flatten() {
+        if (this.allowFlatten) {
+            this.animation.effect?.updateTiming({ easing: "linear" });
+        }
+    }
+    /**
+     * Attaches a timeline to the animation, for instance the `ScrollTimeline`.
+     */
+    attachTimeline(timeline) {
+        this.animation.timeline = timeline;
+        this.animation.onfinish = null;
+        return noop;
+    }
+    /**
+     * Allows the animation to be awaited.
+     *
+     * @deprecated Use `finished` instead.
+     */
+    then(onResolve, onReject) {
+        return this.finished.then(onResolve).catch(onReject);
+    }
+}
+
+function getValueTransition$1(transition, key) {
+    return (transition?.[key] ??
+        transition?.["default"] ??
+        transition);
+}
+
+/**
+ * Implement a practical max duration for keyframe generation
+ * to prevent infinite loops
+ */
+const maxGeneratorDuration = 20000;
+function calcGeneratorDuration(generator) {
+    let duration = 0;
+    const timeStep = 50;
+    let state = generator.next(duration);
+    while (!state.done && duration < maxGeneratorDuration) {
+        duration += timeStep;
+        state = generator.next(duration);
+    }
+    return duration >= maxGeneratorDuration ? Infinity : duration;
+}
+
+/**
+ * Create a progress => progress easing function from a generator.
+ */
+function createGeneratorEasing(options, scale = 100, createGenerator) {
+    const generator = createGenerator({ ...options, keyframes: [0, scale] });
+    const duration = Math.min(calcGeneratorDuration(generator), maxGeneratorDuration);
+    return {
+        type: "keyframes",
+        ease: (progress) => {
+            return generator.next(duration * progress).value / scale;
+        },
+        duration: millisecondsToSeconds(duration),
+    };
+}
+
 function resolveElements(elementOrSelector, scope, selectorCache) {
-    var _a;
     if (elementOrSelector instanceof EventTarget) {
         return [elementOrSelector];
     }
     else if (typeof elementOrSelector === "string") {
         let root = document;
         if (scope) {
-            // TODO: Refactor to utils package
-            // invariant(
-            //     Boolean(scope.current),
-            //     "Scope provided, but no element detected."
-            // )
             root = scope.current;
         }
-        const elements = (_a = selectorCache === null || selectorCache === void 0 ? void 0 : selectorCache[elementOrSelector]) !== null && _a !== void 0 ? _a : root.querySelectorAll(elementOrSelector);
+        const elements = selectorCache?.[elementOrSelector] ??
+            root.querySelectorAll(elementOrSelector);
         return elements ? Array.from(elements) : [];
     }
     return Array.from(elementOrSelector);
@@ -449,7 +633,6 @@ function calculateRepeatDuration(duration, repeat, _repeatDelay) {
  * calculate an absolute time for the next keyframes.
  */
 function calcNextTime(current, next, prev, labels) {
-    var _a;
     if (typeof next === "number") {
         return next;
     }
@@ -460,7 +643,7 @@ function calcNextTime(current, next, prev, labels) {
         return prev;
     }
     else {
-        return (_a = labels.get(next)) !== null && _a !== void 0 ? _a : current;
+        return labels.get(next) ?? current;
     }
 }
 
@@ -573,7 +756,7 @@ function createAnimationsFromSequence(sequence, { defaultTransition = {}, ...seq
             const numKeyframes = valueKeyframesAsList.length;
             const createGenerator = isGenerator(type)
                 ? type
-                : generators === null || generators === void 0 ? void 0 : generators[type];
+                : generators?.[type];
             if (numKeyframes <= 2 && createGenerator) {
                 /**
                  * As we're creating an easing function from a spring,
@@ -595,7 +778,7 @@ function createAnimationsFromSequence(sequence, { defaultTransition = {}, ...seq
                 ease = springEasing.ease;
                 duration = springEasing.duration;
             }
-            duration !== null && duration !== void 0 ? duration : (duration = defaultDuration);
+            duration ?? (duration = defaultDuration);
             const startTime = currentTime + calculatedDelay;
             /**
              * If there's only one time offset of 0, fill in a second with length 1
@@ -754,204 +937,6 @@ function getValueTransition(transition, key) {
 const isNumber = (keyframe) => typeof keyframe === "number";
 const isNumberKeyframesArray = (keyframes) => keyframes.every(isNumber);
 
-function startWaapiAnimation(element, valueName, keyframes, { delay = 0, duration = 300, repeat = 0, repeatType = "loop", ease = "easeInOut", times, } = {}) {
-    const keyframeOptions = { [valueName]: keyframes };
-    if (times)
-        keyframeOptions.offset = times;
-    const easing = mapEasingToNativeEasing(ease, duration);
-    /**
-     * If this is an easing array, apply to keyframes, not animation as a whole
-     */
-    if (Array.isArray(easing))
-        keyframeOptions.easing = easing;
-    const animation = element.animate(keyframeOptions, {
-        delay,
-        duration,
-        easing: !Array.isArray(easing) ? easing : "linear",
-        fill: "both",
-        iterations: repeat + 1,
-        direction: repeatType === "reverse" ? "alternate" : "normal",
-    });
-    return animation;
-}
-
-const createUnitType = (unit) => ({
-    test: (v) => typeof v === "string" && v.endsWith(unit) && v.split(" ").length === 1,
-    parse: parseFloat,
-    transform: (v) => `${v}${unit}`,
-});
-const px = /*@__PURE__*/ createUnitType("px");
-
-const browserNumberValueTypes = {
-    // Border props
-    borderWidth: px,
-    borderTopWidth: px,
-    borderRightWidth: px,
-    borderBottomWidth: px,
-    borderLeftWidth: px,
-    borderRadius: px,
-    radius: px,
-    borderTopLeftRadius: px,
-    borderTopRightRadius: px,
-    borderBottomRightRadius: px,
-    borderBottomLeftRadius: px,
-    // Positioning props
-    width: px,
-    maxWidth: px,
-    height: px,
-    maxHeight: px,
-    top: px,
-    right: px,
-    bottom: px,
-    left: px,
-    // Spacing props
-    padding: px,
-    paddingTop: px,
-    paddingRight: px,
-    paddingBottom: px,
-    paddingLeft: px,
-    margin: px,
-    marginTop: px,
-    marginRight: px,
-    marginBottom: px,
-    marginLeft: px,
-    // Misc
-    backgroundPositionX: px,
-    backgroundPositionY: px,
-};
-
-const isNotNull = (value) => value !== null;
-function getFinalKeyframe(keyframes, { repeat, repeatType = "loop" }, finalKeyframe) {
-    const resolvedKeyframes = keyframes.filter(isNotNull);
-    const index = repeat && repeatType !== "loop" && repeat % 2 === 1
-        ? 0
-        : resolvedKeyframes.length - 1;
-    return !index || finalKeyframe === undefined
-        ? resolvedKeyframes[index]
-        : finalKeyframe;
-}
-
-function setCSSVar(element, name, value) {
-    element.style.setProperty(name, value);
-}
-function setStyle(element, name, value) {
-    element.style[name] = value;
-}
-
-const supportsPartialKeyframes = /*@__PURE__*/ memo(() => {
-    try {
-        document.createElement("div").animate({ opacity: [1] });
-    }
-    catch (e) {
-        return false;
-    }
-    return true;
-});
-
-const supportsWaapi = /*@__PURE__*/ memo(() => Object.hasOwnProperty.call(Element.prototype, "animate"));
-
-const state = new WeakMap();
-function hydrateKeyframes(valueName, keyframes, read) {
-    for (let i = 0; i < keyframes.length; i++) {
-        if (keyframes[i] === null) {
-            keyframes[i] = i === 0 ? read() : keyframes[i - 1];
-        }
-        if (typeof keyframes[i] === "number" &&
-            browserNumberValueTypes[valueName]) {
-            keyframes[i] = browserNumberValueTypes[valueName].transform(keyframes[i]);
-        }
-    }
-    if (!supportsPartialKeyframes() && keyframes.length < 2) {
-        keyframes.unshift(read());
-    }
-}
-const defaultEasing = "easeOut";
-function getElementAnimationState(element) {
-    const animationState = state.get(element) || new Map();
-    state.set(element, animationState);
-    return state.get(element);
-}
-class NativeAnimation extends NativeAnimationControls {
-    constructor(element, valueName, valueKeyframes, options) {
-        const isCSSVar = valueName.startsWith("--");
-        invariant(typeof options.type !== "string", `animateMini doesn't support "type" as a string. Did you mean to import { spring } from "framer-motion"?`);
-        const existingAnimation = getElementAnimationState(element).get(valueName);
-        existingAnimation && existingAnimation.stop();
-        const readInitialKeyframe = () => {
-            return valueName.startsWith("--")
-                ? element.style.getPropertyValue(valueName)
-                : window.getComputedStyle(element)[valueName];
-        };
-        if (!Array.isArray(valueKeyframes)) {
-            valueKeyframes = [valueKeyframes];
-        }
-        hydrateKeyframes(valueName, valueKeyframes, readInitialKeyframe);
-        // TODO: Replace this with toString()?
-        if (isGenerator(options.type)) {
-            const generatorOptions = createGeneratorEasing(options, 100, options.type);
-            options.ease = supportsLinearEasing()
-                ? generatorOptions.ease
-                : defaultEasing;
-            options.duration = secondsToMilliseconds(generatorOptions.duration);
-            options.type = "keyframes";
-        }
-        else {
-            options.ease = options.ease || defaultEasing;
-        }
-        const onFinish = () => {
-            this.setValue(element, valueName, getFinalKeyframe(valueKeyframes, options));
-            this.cancel();
-            this.resolveFinishedPromise();
-        };
-        const init = () => {
-            this.setValue = isCSSVar ? setCSSVar : setStyle;
-            this.options = options;
-            this.updateFinishedPromise();
-            this.removeAnimation = () => {
-                const elementState = state.get(element);
-                elementState && elementState.delete(valueName);
-            };
-        };
-        if (!supportsWaapi()) {
-            super();
-            init();
-            onFinish();
-        }
-        else {
-            super(startWaapiAnimation(element, valueName, valueKeyframes, options));
-            init();
-            if (options.autoplay === false) {
-                this.animation.pause();
-            }
-            this.animation.onfinish = onFinish;
-            getElementAnimationState(element).set(valueName, this);
-        }
-    }
-    /**
-     * Allows the returned animation to be awaited or promise-chained. Currently
-     * resolves when the animation finishes at all but in a future update could/should
-     * reject if its cancels.
-     */
-    then(resolve, reject) {
-        return this.currentFinishedPromise.then(resolve, reject);
-    }
-    updateFinishedPromise() {
-        this.currentFinishedPromise = new Promise((resolve) => {
-            this.resolveFinishedPromise = resolve;
-        });
-    }
-    play() {
-        if (this.state === "finished") {
-            this.updateFinishedPromise();
-        }
-        super.play();
-    }
-    cancel() {
-        this.removeAnimation();
-        super.cancel();
-    }
-}
-
 function animateElements(elementOrSelector, keyframes, options, scope) {
     const elements = resolveElements(elementOrSelector, scope);
     const numElements = elements.length;
@@ -971,13 +956,15 @@ function animateElements(elementOrSelector, keyframes, options, scope) {
             const valueOptions = {
                 ...getValueTransition$1(elementTransition, valueName),
             };
-            valueOptions.duration = valueOptions.duration
-                ? secondsToMilliseconds(valueOptions.duration)
-                : valueOptions.duration;
-            valueOptions.delay = secondsToMilliseconds(valueOptions.delay || 0);
-            valueOptions.allowFlatten =
-                !elementTransition.type && !elementTransition.ease;
-            animations.push(new NativeAnimation(element, valueName, valueKeyframes, valueOptions));
+            valueOptions.duration && (valueOptions.duration = secondsToMilliseconds(valueOptions.duration));
+            valueOptions.delay && (valueOptions.delay = secondsToMilliseconds(valueOptions.delay));
+            animations.push(new NativeAnimation({
+                element,
+                name: valueName,
+                keyframes: valueKeyframes,
+                transition: valueOptions,
+                allowFlatten: !elementTransition.type && !elementTransition.ease,
+            }));
         }
     }
     return animations;
@@ -988,12 +975,12 @@ function animateSequence(definition, options) {
     createAnimationsFromSequence(definition, options).forEach(({ keyframes, transition }, element) => {
         animations.push(...animateElements(element, keyframes, transition));
     });
-    return new GroupPlaybackControls(animations);
+    return new GroupAnimationWithThen(animations);
 }
 
 const createScopedWaapiAnimate = (scope) => {
     function scopedAnimate(elementOrSelector, keyframes, options) {
-        return new GroupPlaybackControls(animateElements(elementOrSelector, keyframes, options, scope));
+        return new GroupAnimationWithThen(animateElements(elementOrSelector, keyframes, options, scope));
     }
     return scopedAnimate;
 };