framer-motion 12.6.2 → 12.6.3

package/dist/cjs/index.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
-var create = require('./create-BLp_edji.js');
+var create = require('./create-B2InJs4e.js');
 var motionDom = require('motion-dom');
 var motionUtils = require('motion-utils');
 
@@ -308,9 +308,9 @@ const AnimatePresence = ({ children, custom, initial = true, onExitComplete, pre
                         isEveryExitComplete = false;
                 });
                 if (isEveryExitComplete) {
-                    forceRender === null || forceRender === void 0 ? void 0 : forceRender();
+                    forceRender?.();
                     setRenderedChildren(pendingPresentChildren.current);
-                    propagate && (safeToRemove === null || safeToRemove === void 0 ? void 0 : safeToRemove());
+                    propagate && safeToRemove?.();
                     onExitComplete && onExitComplete();
                 }
             };
@@ -786,7 +786,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;
     }
@@ -797,7 +796,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;
     }
 }
 
@@ -910,7 +909,7 @@ function createAnimationsFromSequence(sequence, { defaultTransition = {}, ...seq
             const numKeyframes = valueKeyframesAsList.length;
             const createGenerator = motionDom.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,
@@ -932,7 +931,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
@@ -1235,7 +1234,7 @@ function createScopedAnimate(scope) {
         else {
             animations = animateSubject(subjectOrSequence, optionsOrKeyframes, options, scope);
         }
-        const animation = new motionDom.GroupPlaybackControls(animations);
+        const animation = new motionDom.GroupAnimationWithThen(animations);
         if (scope) {
             scope.animations.push(animation);
         }
@@ -1245,125 +1244,6 @@ function createScopedAnimate(scope) {
 }
 const animate = createScopedAnimate();
 
-function setCSSVar(element, name, value) {
-    element.style.setProperty(name, value);
-}
-function setStyle(element, name, value) {
-    element.style[name] = value;
-}
-
-const supportsPartialKeyframes = /*@__PURE__*/ motionUtils.memo(() => {
-    try {
-        document.createElement("div").animate({ opacity: [1] });
-    }
-    catch (e) {
-        return false;
-    }
-    return true;
-});
-
-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" &&
-            create.browserNumberValueTypes[valueName]) {
-            keyframes[i] = create.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 motionDom.NativeAnimationControls {
-    constructor(element, valueName, valueKeyframes, options) {
-        const isCSSVar = valueName.startsWith("--");
-        motionUtils.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 (motionDom.isGenerator(options.type)) {
-            const generatorOptions = motionDom.createGeneratorEasing(options, 100, options.type);
-            options.ease = motionDom.supportsLinearEasing()
-                ? generatorOptions.ease
-                : defaultEasing;
-            options.duration = motionUtils.secondsToMilliseconds(generatorOptions.duration);
-            options.type = "keyframes";
-        }
-        else {
-            options.ease = options.ease || defaultEasing;
-        }
-        const onFinish = () => {
-            this.setValue(element, valueName, create.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 (!create.supportsWaapi()) {
-            super();
-            init();
-            onFinish();
-        }
-        else {
-            super(create.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 = motionDom.resolveElements(elementOrSelector, scope);
     const numElements = elements.length;
@@ -1383,13 +1263,15 @@ function animateElements(elementOrSelector, keyframes, options, scope) {
             const valueOptions = {
                 ...motionDom.getValueTransition(elementTransition, valueName),
             };
-            valueOptions.duration = valueOptions.duration
-                ? motionUtils.secondsToMilliseconds(valueOptions.duration)
-                : valueOptions.duration;
-            valueOptions.delay = motionUtils.secondsToMilliseconds(valueOptions.delay || 0);
-            valueOptions.allowFlatten =
-                !elementTransition.type && !elementTransition.ease;
-            animations.push(new NativeAnimation(element, valueName, valueKeyframes, valueOptions));
+            valueOptions.duration && (valueOptions.duration = motionUtils.secondsToMilliseconds(valueOptions.duration));
+            valueOptions.delay && (valueOptions.delay = motionUtils.secondsToMilliseconds(valueOptions.delay));
+            animations.push(new motionDom.NativeAnimation({
+                element,
+                name: valueName,
+                keyframes: valueKeyframes,
+                transition: valueOptions,
+                allowFlatten: !elementTransition.type && !elementTransition.ease,
+            }));
         }
     }
     return animations;
@@ -1397,7 +1279,7 @@ function animateElements(elementOrSelector, keyframes, options, scope) {
 
 const createScopedWaapiAnimate = (scope) => {
     function scopedAnimate(elementOrSelector, keyframes, options) {
-        return new motionDom.GroupPlaybackControls(animateElements(elementOrSelector, keyframes, options, scope));
+        return new motionDom.GroupAnimationWithThen(animateElements(elementOrSelector, keyframes, options, scope));
     }
     return scopedAnimate;
 };
@@ -1436,8 +1318,7 @@ function getElementSize(target, borderBoxSize) {
     }
 }
 function notifyTarget({ target, contentRect, borderBoxSize, }) {
-    var _a;
-    (_a = resizeHandlers.get(target)) === null || _a === void 0 ? void 0 : _a.forEach((handler) => {
+    resizeHandlers.get(target)?.forEach((handler) => {
         handler({
             target,
             contentSize: contentRect,
@@ -1466,14 +1347,14 @@ function resizeElement(target, handler) {
             resizeHandlers.set(element, elementHandlers);
         }
         elementHandlers.add(handler);
-        observer === null || observer === void 0 ? void 0 : observer.observe(element);
+        observer?.observe(element);
     });
     return () => {
         elements.forEach((element) => {
             const elementHandlers = resizeHandlers.get(element);
-            elementHandlers === null || elementHandlers === void 0 ? void 0 : elementHandlers.delete(handler);
-            if (!(elementHandlers === null || elementHandlers === void 0 ? void 0 : elementHandlers.size)) {
-                observer === null || observer === void 0 ? void 0 : observer.unobserve(element);
+            elementHandlers?.delete(handler);
+            if (!elementHandlers?.size) {
+                observer?.unobserve(element);
             }
         });
     };
@@ -1852,7 +1733,6 @@ function scrollInfo(onScroll, { container = document.documentElement, ...options
     const listener = scrollListeners.get(container);
     motionDom.frame.read(listener, false, true);
     return () => {
-        var _a;
         motionDom.cancelFrame(listener);
         /**
          * Check if we even have any handlers for this container.
@@ -1870,7 +1750,7 @@ function scrollInfo(onScroll, { container = document.documentElement, ...options
         scrollListeners.delete(container);
         if (scrollListener) {
             getEventTarget(container).removeEventListener("scroll", scrollListener);
-            (_a = resizeListeners.get(container)) === null || _a === void 0 ? void 0 : _a();
+            resizeListeners.get(container)?.();
             window.removeEventListener("resize", scrollListener);
         }
     };
@@ -2101,8 +1981,8 @@ function useScroll({ container, target, layoutEffect = true, ...options } = {})
             values.scrollYProgress.set(y.progress);
         }, {
             ...options,
-            container: (container === null || container === void 0 ? void 0 : container.current) || undefined,
-            target: (target === null || target === void 0 ? void 0 : target.current) || undefined,
+            container: container?.current || undefined,
+            target: target?.current || undefined,
         });
     }, [container, target, JSON.stringify(options.offset)]);
     return values;
@@ -2760,7 +2640,6 @@ const appearStoreId = (elementId, valueName) => {
 };
 
 function handoffOptimizedAppearAnimation(elementId, valueName, frame) {
-    var _a;
     const storeId = appearStoreId(elementId, valueName);
     const optimisedAnimation = appearAnimationStore.get(storeId);
     if (!optimisedAnimation) {
@@ -2768,8 +2647,7 @@ function handoffOptimizedAppearAnimation(elementId, valueName, frame) {
     }
     const { animation, startTime } = optimisedAnimation;
     function cancelAnimation() {
-        var _a;
-        (_a = window.MotionCancelOptimisedAnimation) === null || _a === void 0 ? void 0 : _a.call(window, elementId, valueName, frame);
+        window.MotionCancelOptimisedAnimation?.(elementId, valueName, frame);
     }
     /**
      * We can cancel the animation once it's finished now that we've synced
@@ -2779,7 +2657,7 @@ function handoffOptimizedAppearAnimation(elementId, valueName, frame) {
      * older browsers.
      */
     animation.onfinish = cancelAnimation;
-    if (startTime === null || ((_a = window.MotionHandoffIsComplete) === null || _a === void 0 ? void 0 : _a.call(window, elementId))) {
+    if (startTime === null || window.MotionHandoffIsComplete?.(elementId)) {
         /**
          * If the startTime is null, this animation is the Paint Ready detection animation
          * and we can cancel it immediately without handoff.
@@ -2831,7 +2709,7 @@ function startOptimizedAppearAnimation(element, name, keyframes, options, onRead
     window.MotionHandoffAnimation = handoffOptimizedAppearAnimation;
     const storeId = appearStoreId(id, name);
     if (!readyAnimation) {
-        readyAnimation = create.startWaapiAnimation(element, name, [keyframes[0], keyframes[0]], 
+        readyAnimation = motionDom.startWaapiAnimation(element, name, [keyframes[0], keyframes[0]], 
         /**
          * 10 secs is basically just a super-safe duration to give Chrome
          * long enough to get the animation ready.
@@ -2913,18 +2791,16 @@ function startOptimizedAppearAnimation(element, name, keyframes, options, onRead
             }
         };
         window.MotionCheckAppearSync = (visualElement, valueName, value) => {
-            var _a, _b;
             const appearId = create.getOptimisedAppearId(visualElement);
             if (!appearId)
                 return;
-            const valueIsOptimised = (_a = window.MotionHasOptimisedAnimation) === null || _a === void 0 ? void 0 : _a.call(window, appearId, valueName);
-            const externalAnimationValue = (_b = visualElement.props.values) === null || _b === void 0 ? void 0 : _b[valueName];
+            const valueIsOptimised = window.MotionHasOptimisedAnimation?.(appearId, valueName);
+            const externalAnimationValue = visualElement.props.values?.[valueName];
             if (!valueIsOptimised || !externalAnimationValue)
                 return;
             const removeSyncCheck = value.on("change", (latestValue) => {
-                var _a;
                 if (externalAnimationValue.get() !== latestValue) {
-                    (_a = window.MotionCancelOptimisedAnimation) === null || _a === void 0 ? void 0 : _a.call(window, appearId, valueName);
+                    window.MotionCancelOptimisedAnimation?.(appearId, valueName);
                     removeSyncCheck();
                 }
             });
@@ -2933,7 +2809,7 @@ function startOptimizedAppearAnimation(element, name, keyframes, options, onRead
     }
     const startAnimation = () => {
         readyAnimation.cancel();
-        const appearAnimation = create.startWaapiAnimation(element, name, keyframes, options);
+        const appearAnimation = motionDom.startWaapiAnimation(element, name, keyframes, options);
         /**
          * Record the time of the first started animation. We call performance.now() once
          * here and once in handoff to ensure we're getting

package/dist/cjs/m.js

@@ -177,7 +177,6 @@ const SwitchLayoutGroupContext = react.createContext({});
 const useIsomorphicLayoutEffect = isBrowser ? react.useLayoutEffect : react.useEffect;
 
 function useVisualElement(Component, visualState, props, createVisualElement, ProjectionNodeConstructor) {
-    var _a, _b;
     const { visualElement: parent } = react.useContext(MotionContext);
     const lazyContext = react.useContext(LazyContext);
     const presenceContext = react.useContext(PresenceContext);
@@ -227,8 +226,8 @@ function useVisualElement(Component, visualState, props, createVisualElement, Pr
      */
     const optimisedAppearId = props[optimizedAppearDataAttribute];
     const wantsHandoff = react.useRef(Boolean(optimisedAppearId) &&
-        !((_a = window.MotionHandoffIsComplete) === null || _a === void 0 ? void 0 : _a.call(window, optimisedAppearId)) &&
-        ((_b = window.MotionHasOptimisedAnimation) === null || _b === void 0 ? void 0 : _b.call(window, optimisedAppearId)));
+        !window.MotionHandoffIsComplete?.(optimisedAppearId) &&
+        window.MotionHasOptimisedAnimation?.(optimisedAppearId));
     useIsomorphicLayoutEffect(() => {
         if (!visualElement)
             return;
@@ -259,8 +258,7 @@ function useVisualElement(Component, visualState, props, createVisualElement, Pr
         if (wantsHandoff.current) {
             // This ensures all future calls to animateChanges() in this component will run in useEffect
             queueMicrotask(() => {
-                var _a;
-                (_a = window.MotionHandoffMarkAsComplete) === null || _a === void 0 ? void 0 : _a.call(window, optimisedAppearId);
+                window.MotionHandoffMarkAsComplete?.(optimisedAppearId);
             });
             wantsHandoff.current = false;
         }
@@ -308,7 +306,6 @@ function getClosestProjectingNode(visualElement) {
  * component "offline", or outside the React render cycle.
  */
 function createRendererMotionComponent({ preloadedFeatures, createVisualElement, useRender, useVisualState, Component, }) {
-    var _a, _b;
     preloadedFeatures && loadFeatures(preloadedFeatures);
     function MotionComponent(props, externalRef) {
         /**
@@ -344,7 +341,7 @@ function createRendererMotionComponent({ preloadedFeatures, createVisualElement,
     }
     MotionComponent.displayName = `motion.${typeof Component === "string"
         ? Component
-        : `create(${(_b = (_a = Component.displayName) !== null && _a !== void 0 ? _a : Component.name) !== null && _b !== void 0 ? _b : ""})`}`;
+        : `create(${Component.displayName ?? Component.name ?? ""})`}`;
     const ForwardRefMotionComponent = react.forwardRef(MotionComponent);
     ForwardRefMotionComponent[motionComponentSymbol] = Component;
     return ForwardRefMotionComponent;
@@ -376,7 +373,7 @@ function getProjectionFunctionality(props) {
         return {};
     const combined = { ...drag, ...layout };
     return {
-        MeasureLayout: (drag === null || drag === void 0 ? void 0 : drag.isEnabled(props)) || (layout === null || layout === void 0 ? void 0 : layout.isEnabled(props))
+        MeasureLayout: drag?.isEnabled(props) || layout?.isEnabled(props)
             ? combined.MeasureLayout
             : undefined,
         ProjectionNode: combined.ProjectionNode,
@@ -807,7 +804,7 @@ try {
      */
     loadExternalIsValidProp(require("@emotion/is-prop-valid").default);
 }
-catch (_a) {
+catch {
     // We don't need to actually do anything here - the fallback is the existing `isPropValid`.
 }
 function filterProps(props, isDom, forwardMotionProps) {
@@ -1036,7 +1033,7 @@ function createUseRender(forwardMotionProps = false) {
 
 function getValueState(visualElement) {
     const state = [{}, {}];
-    visualElement === null || visualElement === void 0 ? void 0 : visualElement.values.forEach((value, key) => {
+    visualElement?.values.forEach((value, key) => {
         state[0][key] = value.get();
         state[1][key] = value.getVelocity();
     });
@@ -1179,7 +1176,6 @@ function makeLatestValues(props, context, presenceContext, scrapeMotionValues) {
 }
 
 function scrapeMotionValuesFromProps$1(props, prevProps, visualElement) {
-    var _a;
     const { style } = props;
     const newValues = {};
     for (const key in style) {
@@ -1187,7 +1183,7 @@ function scrapeMotionValuesFromProps$1(props, prevProps, visualElement) {
             (prevProps.style &&
                 isMotionValue(prevProps.style[key])) ||
             isForcedMotionValue(key, props) ||
-            ((_a = visualElement === null || visualElement === void 0 ? void 0 : visualElement.getValue(key)) === null || _a === void 0 ? void 0 : _a.liveStyle) !== undefined) {
+            visualElement?.getValue(key)?.liveStyle !== undefined) {
             newValues[key] = style[key];
         }
     }

package/dist/cjs/mini.js

@@ -25,212 +25,6 @@ function useUnmountEffect(callback) {
     return react.useEffect(() => () => callback(), []);
 }
 
-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 = motionDom.mapEasingToNativeEasing(ease, duration);
-    /**
-     * If this is an easing array, apply to keyframes, not animation as a whole
-     */
-    if (Array.isArray(easing))
-        keyframeOptions.easing = easing;
-    if (motionDom.statsBuffer.value) {
-        motionDom.activeAnimations.waapi++;
-    }
-    const animation = element.animate(keyframeOptions, {
-        delay,
-        duration,
-        easing: !Array.isArray(easing) ? easing : "linear",
-        fill: "both",
-        iterations: repeat + 1,
-        direction: repeatType === "reverse" ? "alternate" : "normal",
-    });
-    if (motionDom.statsBuffer.value) {
-        animation.finished.finally(() => {
-            motionDom.activeAnimations.waapi--;
-        });
-    }
-    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__*/ motionUtils.memo(() => {
-    try {
-        document.createElement("div").animate({ opacity: [1] });
-    }
-    catch (e) {
-        return false;
-    }
-    return true;
-});
-
-const supportsWaapi = /*@__PURE__*/ motionUtils.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 motionDom.NativeAnimationControls {
-    constructor(element, valueName, valueKeyframes, options) {
-        const isCSSVar = valueName.startsWith("--");
-        motionUtils.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 (motionDom.isGenerator(options.type)) {
-            const generatorOptions = motionDom.createGeneratorEasing(options, 100, options.type);
-            options.ease = motionDom.supportsLinearEasing()
-                ? generatorOptions.ease
-                : defaultEasing;
-            options.duration = motionUtils.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 = motionDom.resolveElements(elementOrSelector, scope);
     const numElements = elements.length;
@@ -250,13 +44,15 @@ function animateElements(elementOrSelector, keyframes, options, scope) {
             const valueOptions = {
                 ...motionDom.getValueTransition(elementTransition, valueName),
             };
-            valueOptions.duration = valueOptions.duration
-                ? motionUtils.secondsToMilliseconds(valueOptions.duration)
-                : valueOptions.duration;
-            valueOptions.delay = motionUtils.secondsToMilliseconds(valueOptions.delay || 0);
-            valueOptions.allowFlatten =
-                !elementTransition.type && !elementTransition.ease;
-            animations.push(new NativeAnimation(element, valueName, valueKeyframes, valueOptions));
+            valueOptions.duration && (valueOptions.duration = motionUtils.secondsToMilliseconds(valueOptions.duration));
+            valueOptions.delay && (valueOptions.delay = motionUtils.secondsToMilliseconds(valueOptions.delay));
+            animations.push(new motionDom.NativeAnimation({
+                element,
+                name: valueName,
+                keyframes: valueKeyframes,
+                transition: valueOptions,
+                allowFlatten: !elementTransition.type && !elementTransition.ease,
+            }));
         }
     }
     return animations;
@@ -264,7 +60,7 @@ function animateElements(elementOrSelector, keyframes, options, scope) {
 
 const createScopedWaapiAnimate = (scope) => {
     function scopedAnimate(elementOrSelector, keyframes, options) {
-        return new motionDom.GroupPlaybackControls(animateElements(elementOrSelector, keyframes, options, scope));
+        return new motionDom.GroupAnimationWithThen(animateElements(elementOrSelector, keyframes, options, scope));
     }
     return scopedAnimate;
 };