motion 12.7.3 → 12.7.5-alpha.0

package/dist/cjs/mini.js

@@ -59,187 +59,154 @@ const secondsToMilliseconds = (seconds) => seconds * 1000;
 /*#__NO_SIDE_EFFECTS__*/
 const millisecondsToSeconds = (milliseconds) => milliseconds / 1000;
 
-const supportsScrollTimeline = /* @__PURE__ */ memo(() => window.ScrollTimeline !== undefined);
+const wrap = (min, max, v) => {
+    const rangeSize = max - min;
+    return ((((v - min) % rangeSize) + rangeSize) % rangeSize) + min;
+};
 
-class GroupAnimation {
-    constructor(animations) {
-        // Bound to accomodate common `return animation.stop` pattern
-        this.stop = () => this.runAll("stop");
-        this.animations = animations.filter(Boolean);
-    }
-    get finished() {
-        return Promise.all(this.animations.map((animation) => animation.finished));
-    }
-    /**
-     * TODO: Filter out cancelled or stopped animations before returning
-     */
-    getAll(propName) {
-        return this.animations[0][propName];
-    }
-    setAll(propName, newValue) {
-        for (let i = 0; i < this.animations.length; i++) {
-            this.animations[i][propName] = newValue;
-        }
-    }
-    attachTimeline(timeline, fallback) {
-        const subscriptions = this.animations.map((animation) => {
-            if (supportsScrollTimeline() && animation.attachTimeline) {
-                return animation.attachTimeline(timeline);
-            }
-            else if (typeof fallback === "function") {
-                return fallback(animation);
-            }
-        });
-        return () => {
-            subscriptions.forEach((cancel, i) => {
-                cancel && cancel();
-                this.animations[i].stop();
-            });
-        };
-    }
-    get time() {
-        return this.getAll("time");
-    }
-    set time(time) {
-        this.setAll("time", time);
-    }
-    get speed() {
-        return this.getAll("speed");
-    }
-    set speed(speed) {
-        this.setAll("speed", speed);
-    }
-    get startTime() {
-        return this.getAll("startTime");
-    }
-    get duration() {
-        let max = 0;
-        for (let i = 0; i < this.animations.length; i++) {
-            max = Math.max(max, this.animations[i].duration);
-        }
-        return max;
-    }
-    runAll(methodName) {
-        this.animations.forEach((controls) => controls[methodName]());
-    }
-    flatten() {
-        this.runAll("flatten");
-    }
-    play() {
-        this.runAll("play");
-    }
-    pause() {
-        this.runAll("pause");
-    }
-    cancel() {
-        this.runAll("cancel");
+const isEasingArray = (ease) => {
+    return Array.isArray(ease) && typeof ease[0] !== "number";
+};
+
+function getEasingForSegment(easing, i) {
+    return isEasingArray(easing) ? easing[wrap(0, easing.length, i)] : easing;
+}
+
+const isBezierDefinition = (easing) => Array.isArray(easing) && typeof easing[0] === "number";
+
+/*
+  Value in range from progress
+
+  Given a lower limit and an upper limit, we return the value within
+  that range as expressed by progress (usually a number from 0 to 1)
+
+  So progress = 0.5 would change
+
+  from -------- to
+
+  to
+
+  from ---- to
+
+  E.g. from = 10, to = 20, progress = 0.5 => 15
+
+  @param [number]: Lower limit of range
+  @param [number]: Upper limit of range
+  @param [number]: The progress between lower and upper limits expressed 0-1
+  @return [number]: Value as calculated from progress within range (not limited within range)
+*/
+const mixNumber = (from, to, progress) => {
+    return from + (to - from) * progress;
+};
+
+const generateLinearEasing = (easing, duration, // as milliseconds
+resolution = 10 // as milliseconds
+) => {
+    let points = "";
+    const numPoints = Math.max(Math.round(duration / resolution), 2);
+    for (let i = 0; i < numPoints; i++) {
+        points += easing(i / (numPoints - 1)) + ", ";
     }
-    complete() {
-        this.runAll("complete");
+    return `linear(${points.substring(0, points.length - 2)})`;
+};
+
+/**
+ * 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;
 }
 
-class GroupAnimationWithThen extends GroupAnimation {
-    then(onResolve, _onReject) {
-        return this.finished.finally(onResolve).then(() => { });
+/**
+ * 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 fillOffset(offset, remaining) {
+    const min = offset[offset.length - 1];
+    for (let i = 1; i <= remaining; i++) {
+        const offsetProgress = progress(0, remaining, i);
+        offset.push(mixNumber(min, 1, offsetProgress));
     }
 }
 
-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 defaultOffset(arr) {
+    const offset = [0];
+    fillOffset(offset, arr.length - 1);
+    return offset;
+}
 
 const isNotNull = (value) => value !== null;
-function getFinalKeyframe(keyframes, { repeat, repeatType = "loop" }, finalKeyframe) {
+function getFinalKeyframe(keyframes, { repeat, repeatType = "loop" }, finalKeyframe, speed = 1) {
     const resolvedKeyframes = keyframes.filter(isNotNull);
-    const index = repeat && repeatType !== "loop" && repeat % 2 === 1
-        ? 0
-        : resolvedKeyframes.length - 1;
+    const useFirstKeyframe = speed < 0 || (repeat && repeatType !== "loop" && repeat % 2 === 1);
+    const index = useFirstKeyframe ? 0 : resolvedKeyframes.length - 1;
     return !index || finalKeyframe === undefined
         ? resolvedKeyframes[index]
         : finalKeyframe;
 }
 
-const supportsPartialKeyframes = /*@__PURE__*/ memo(() => {
-    try {
-        document.createElement("div").animate({ opacity: [1] });
+class WithPromise {
+    constructor() {
+        this.count = 0;
+        this.updateFinished();
     }
-    catch (e) {
-        return false;
+    get finished() {
+        return this._finished;
     }
-    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];
+    updateFinished() {
+        this.count++;
+        this._finished = new Promise((resolve) => {
+            this.resolve = resolve;
+        });
     }
-    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 (typeof keyframes[i] === "number" && pxValues.has(name)) {
-            keyframes[i] = keyframes[i] + "px";
-        }
+    notifyFinished() {
+        this.resolve();
     }
-    if (!pseudoElement && !supportsPartialKeyframes() && keyframes.length < 2) {
-        keyframes.unshift(style.get(element, name));
+    /**
+     * Allows the animation to be awaited.
+     *
+     * @deprecated Use `finished` instead.
+     */
+    then(onResolve, onReject) {
+        return this.finished.then(onResolve, onReject);
     }
-    return keyframes;
 }
 
-const isBezierDefinition = (easing) => Array.isArray(easing) && typeof easing[0] === "number";
+function fillWildcards(keyframes) {
+    for (let i = 1; i < keyframes.length; i++) {
+        keyframes[i] ?? (keyframes[i] = keyframes[i - 1]);
+    }
+}
+
+const isCSSVar = (name) => name.startsWith("--");
+
+function setStyle(element, name, value) {
+    isCSSVar(name)
+        ? element.style.setProperty(name, value)
+        : (element.style[name] = value);
+}
+
+const supportsScrollTimeline = /* @__PURE__ */ memo(() => window.ScrollTimeline !== undefined);
 
 /**
  * Add the ability for test suites to manually set support flags
@@ -264,17 +231,6 @@ const supportsLinearEasing = /*@__PURE__*/ memoSupports(() => {
     return true;
 }, "linearEasing");
 
-const generateLinearEasing = (easing, duration, // as milliseconds
-resolution = 10 // as milliseconds
-) => {
-    let points = "";
-    const numPoints = Math.max(Math.round(duration / resolution), 2);
-    for (let i = 0; i < numPoints; 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 = {
@@ -293,8 +249,10 @@ function mapEasingToNativeEasing(easing, duration) {
     if (!easing) {
         return undefined;
     }
-    else if (typeof easing === "function" && supportsLinearEasing()) {
-        return generateLinearEasing(easing, duration);
+    else if (typeof easing === "function") {
+        return supportsLinearEasing()
+            ? generateLinearEasing(easing, duration)
+            : "ease-out";
     }
     else if (isBezierDefinition(easing)) {
         return cubicBezierAsString(easing);
@@ -308,7 +266,7 @@ function mapEasingToNativeEasing(easing, duration) {
     }
 }
 
-function startWaapiAnimation(element, valueName, keyframes, { delay = 0, duration = 300, repeat = 0, repeatType = "loop", ease = "easeInOut", times, } = {}, pseudoElement = undefined) {
+function startWaapiAnimation(element, valueName, keyframes, { delay = 0, duration = 300, repeat = 0, repeatType = "loop", ease = "easeOut", times, } = {}, pseudoElement = undefined) {
     const keyframeOptions = {
         [valueName]: keyframes,
     };
@@ -320,15 +278,17 @@ function startWaapiAnimation(element, valueName, keyframes, { delay = 0, duratio
      */
     if (Array.isArray(easing))
         keyframeOptions.easing = easing;
-    const animation = element.animate(keyframeOptions, {
+    const options = {
         delay,
         duration,
         easing: !Array.isArray(easing) ? easing : "linear",
         fill: "both",
         iterations: repeat + 1,
         direction: repeatType === "reverse" ? "alternate" : "normal",
-        pseudoElement,
-    });
+    };
+    if (pseudoElement)
+        options.pseudoElement = pseudoElement;
+    const animation = element.animate(keyframeOptions, options);
     return animation;
 }
 
@@ -337,7 +297,7 @@ function isGenerator(type) {
 }
 
 function applyGeneratorOptions({ type, ...options }) {
-    if (isGenerator(type)) {
+    if (isGenerator(type) && supportsLinearEasing()) {
         return type.applyToOptions(options);
     }
     else {
@@ -347,86 +307,81 @@ function applyGeneratorOptions({ type, ...options }) {
     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 {
+class NativeAnimation extends WithPromise {
     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;
+        super();
+        this.finishedTime = null;
+        this.isStopped = false;
+        if (!options)
             return;
-        }
-        const { element, name, keyframes: unresolvedKeyframes, pseudoElement, allowFlatten = false, } = options;
-        let { transition } = options;
+        const { element, name, keyframes, pseudoElement, allowFlatten = false, finalKeyframe, } = options;
         this.isPseudoElement = Boolean(pseudoElement);
         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.options = options;
+        invariant(typeof options.type !== "string", `animateMini doesn't support "type" as a string. Did you mean to import { spring } from "motion"?`);
+        const transition = applyGeneratorOptions(options);
         this.animation = startWaapiAnimation(element, name, keyframes, transition, pseudoElement);
         if (transition.autoplay === false) {
             this.animation.pause();
         }
-        this.removeAnimation = () => animationMap.delete(key);
         this.animation.onfinish = () => {
+            this.finishedTime = this.time;
             if (!pseudoElement) {
-                style.set(element, name, getFinalKeyframe(keyframes, transition));
-                this.cancel();
+                const keyframe = getFinalKeyframe(keyframes, this.options, finalKeyframe, this.speed);
+                if (this.updateMotionValue) {
+                    this.updateMotionValue(keyframe);
+                }
+                else {
+                    /**
+                     * If we can, we want to commit the final style as set by the user,
+                     * rather than the computed keyframe value supplied by the animation.
+                     */
+                    setStyle(element, name, keyframe);
+                }
+                this.animation.cancel();
             }
+            this.notifyFinished();
         };
-        /**
-         * TODO: Check for VisualElement before using animation state.
-         */
-        animationMap.set(key, this);
     }
     play() {
+        if (this.isStopped)
+            return;
         this.animation.play();
+        if (this.state === "finished") {
+            this.updateFinished();
+        }
     }
     pause() {
         this.animation.pause();
     }
     complete() {
-        this.animation.finish();
+        this.animation.finish?.();
     }
     cancel() {
         try {
             this.animation.cancel();
         }
         catch (e) { }
-        this.removeAnimation();
     }
     stop() {
+        if (this.isStopped)
+            return;
+        this.isStopped = true;
         const { state } = this;
         if (state === "idle" || state === "finished") {
             return;
         }
-        this.commitStyles();
-        this.cancel();
+        if (this.updateMotionValue) {
+            this.updateMotionValue();
+        }
+        else {
+            this.commitStyles();
+        }
+        if (!this.isPseudoElement)
+            this.cancel();
     }
     /**
      * WAAPI doesn't natively have any interruption capabilities.
@@ -446,13 +401,14 @@ class NativeAnimation {
         }
     }
     get duration() {
-        const duration = this.animation.effect?.getComputedTiming().duration || 0;
+        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.finishedTime = null;
         this.animation.currentTime = secondsToMilliseconds(newTime);
     }
     /**
@@ -463,75 +419,175 @@ class NativeAnimation {
         return this.animation.playbackRate;
     }
     set speed(newSpeed) {
+        // Allow backwards playback after finishing
+        if (newSpeed < 0)
+            this.finishedTime = null;
         this.animation.playbackRate = newSpeed;
     }
     get state() {
-        return this.animation.playState;
+        return this.finishedTime !== null
+            ? "finished"
+            : this.animation.playState;
     }
     get startTime() {
         return Number(this.animation.startTime);
     }
-    get finished() {
-        return this.animation.finished;
+    set startTime(newStartTime) {
+        this.animation.startTime = newStartTime;
     }
-    flatten() {
+    /**
+     * Attaches a timeline to the animation, for instance the `ScrollTimeline`.
+     */
+    attachTimeline({ timeline, observe }) {
         if (this.allowFlatten) {
             this.animation.effect?.updateTiming({ easing: "linear" });
         }
+        this.animation.onfinish = null;
+        if (supportsScrollTimeline()) {
+            this.animation.timeline = timeline;
+            return noop;
+        }
+        else {
+            return observe(this);
+        }
+    }
+}
+
+class GroupAnimation {
+    constructor(animations) {
+        // Bound to accomadate common `return animation.stop` pattern
+        this.stop = () => this.runAll("stop");
+        this.animations = animations.filter(Boolean);
+    }
+    get finished() {
+        return Promise.all(this.animations.map((animation) => animation.finished));
     }
     /**
-     * Attaches a timeline to the animation, for instance the `ScrollTimeline`.
+     * TODO: Filter out cancelled or stopped animations before returning
      */
+    getAll(propName) {
+        return this.animations[0][propName];
+    }
+    setAll(propName, newValue) {
+        for (let i = 0; i < this.animations.length; i++) {
+            this.animations[i][propName] = newValue;
+        }
+    }
     attachTimeline(timeline) {
-        this.animation.timeline = timeline;
-        this.animation.onfinish = null;
-        return noop;
+        const subscriptions = this.animations.map((animation) => animation.attachTimeline(timeline));
+        return () => {
+            subscriptions.forEach((cancel, i) => {
+                cancel && cancel();
+                this.animations[i].stop();
+            });
+        };
     }
-    /**
-     * Allows the animation to be awaited.
-     *
-     * @deprecated Use `finished` instead.
-     */
-    then(onResolve, onReject) {
-        return this.finished.then(onResolve).catch(onReject);
+    get time() {
+        return this.getAll("time");
+    }
+    set time(time) {
+        this.setAll("time", time);
+    }
+    get speed() {
+        return this.getAll("speed");
+    }
+    set speed(speed) {
+        this.setAll("speed", speed);
+    }
+    get state() {
+        return this.getAll("state");
+    }
+    get startTime() {
+        return this.getAll("startTime");
+    }
+    get duration() {
+        let max = 0;
+        for (let i = 0; i < this.animations.length; i++) {
+            max = Math.max(max, this.animations[i].duration);
+        }
+        return max;
+    }
+    runAll(methodName) {
+        this.animations.forEach((controls) => controls[methodName]());
+    }
+    play() {
+        this.runAll("play");
+    }
+    pause() {
+        this.runAll("pause");
+    }
+    cancel() {
+        this.runAll("cancel");
+    }
+    complete() {
+        this.runAll("complete");
+    }
+}
+
+class GroupAnimationWithThen extends GroupAnimation {
+    then(onResolve, _onReject) {
+        return this.finished.finally(onResolve).then(() => { });
     }
 }
 
+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;
+}
+
 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;
-}
+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",
+]);
 
-/**
- * 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 applyPxDefaults(keyframes, name) {
+    for (let i = 0; i < keyframes.length; i++) {
+        if (typeof keyframes[i] === "number" && pxValues.has(name)) {
+            keyframes[i] = keyframes[i] + "px";
+        }
+    }
 }
 
 function resolveElements(elementOrSelector, scope, selectorCache) {
@@ -550,56 +606,11 @@ function resolveElements(elementOrSelector, scope, selectorCache) {
     return Array.from(elementOrSelector);
 }
 
-const wrap = (min, max, v) => {
-    const rangeSize = max - min;
-    return ((((v - min) % rangeSize) + rangeSize) % rangeSize) + min;
-};
-
-const isEasingArray = (ease) => {
-    return Array.isArray(ease) && typeof ease[0] !== "number";
-};
-
-function getEasingForSegment(easing, i) {
-    return isEasingArray(easing) ? easing[wrap(0, easing.length, i)] : easing;
-}
-
-/*
-  Value in range from progress
-
-  Given a lower limit and an upper limit, we return the value within
-  that range as expressed by progress (usually a number from 0 to 1)
-
-  So progress = 0.5 would change
-
-  from -------- to
-
-  to
-
-  from ---- to
-
-  E.g. from = 10, to = 20, progress = 0.5 => 15
-
-  @param [number]: Lower limit of range
-  @param [number]: Upper limit of range
-  @param [number]: The progress between lower and upper limits expressed 0-1
-  @return [number]: Value as calculated from progress within range (not limited within range)
-*/
-const mixNumber = (from, to, progress) => {
-    return from + (to - from) * progress;
-};
-
-function fillOffset(offset, remaining) {
-    const min = offset[offset.length - 1];
-    for (let i = 1; i <= remaining; i++) {
-        const offsetProgress = progress(0, remaining, i);
-        offset.push(mixNumber(min, 1, offsetProgress));
-    }
-}
-
-function defaultOffset(arr) {
-    const offset = [0];
-    fillOffset(offset, arr.length - 1);
-    return offset;
+function getComputedStyle(element, name) {
+    const computedStyle = window.getComputedStyle(element);
+    return isCSSVar(name)
+        ? computedStyle.getPropertyValue(name)
+        : computedStyle[name];
 }
 
 const isMotionValue = (value) => Boolean(value && value.getVelocity);
@@ -940,7 +951,27 @@ function animateElements(elementOrSelector, keyframes, options, scope) {
     const elements = resolveElements(elementOrSelector, scope);
     const numElements = elements.length;
     invariant(Boolean(numElements), "No valid element provided.");
-    const animations = [];
+    /**
+     * WAAPI doesn't support interrupting animations.
+     *
+     * Therefore, starting animations requires a three-step process:
+     * 1. Stop existing animations (write styles to DOM)
+     * 2. Resolve keyframes (read styles from DOM)
+     * 3. Create new animations (write styles to DOM)
+     *
+     * The hybrid `animate()` function uses AsyncAnimation to resolve
+     * keyframes before creating new animations, which removes style
+     * thrashing. Here, we have much stricter filesize constraints.
+     * Therefore we do this in a synchronous way that ensures that
+     * at least within `animate()` calls there is no style thrashing.
+     *
+     * In the motion-native-animate-mini-interrupt benchmark this
+     * was 80% faster than a single loop.
+     */
+    const animationDefinitions = [];
+    /**
+     * Step 1: Build options and stop existing animations (write)
+     */
     for (let i = 0; i < numElements; i++) {
         const element = elements[i];
         const elementTransition = { ...options };
@@ -951,20 +982,68 @@ function animateElements(elementOrSelector, keyframes, options, scope) {
             elementTransition.delay = elementTransition.delay(i, numElements);
         }
         for (const valueName in keyframes) {
-            const valueKeyframes = keyframes[valueName];
+            let valueKeyframes = keyframes[valueName];
+            if (!Array.isArray(valueKeyframes)) {
+                valueKeyframes = [valueKeyframes];
+            }
             const valueOptions = {
                 ...getValueTransition$1(elementTransition, valueName),
             };
             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,
-            }));
+            /**
+             * If there's an existing animation playing on this element then stop it
+             * before creating a new one.
+             */
+            const map = getAnimationMap(element);
+            const key = animationMapKey(valueName, valueOptions.pseudoElement || "");
+            const currentAnimation = map.get(key);
+            currentAnimation && currentAnimation.stop();
+            animationDefinitions.push({
+                map,
+                key,
+                unresolvedKeyframes: valueKeyframes,
+                options: {
+                    ...valueOptions,
+                    element,
+                    name: valueName,
+                    allowFlatten: !elementTransition.type && !elementTransition.ease,
+                },
+            });
+        }
+    }
+    /**
+     * Step 2: Resolve keyframes (read)
+     */
+    for (let i = 0; i < animationDefinitions.length; i++) {
+        const { unresolvedKeyframes, options: animationOptions } = animationDefinitions[i];
+        const { element, name, pseudoElement } = animationOptions;
+        if (!pseudoElement && unresolvedKeyframes[0] === null) {
+            unresolvedKeyframes[0] = getComputedStyle(element, name);
         }
+        fillWildcards(unresolvedKeyframes);
+        applyPxDefaults(unresolvedKeyframes, name);
+        /**
+         * If we only have one keyframe, explicitly read the initial keyframe
+         * from the computed style. This is to ensure consistency with WAAPI behaviour
+         * for restarting animations, for instance .play() after finish, when it
+         * has one vs two keyframes.
+         */
+        if (!pseudoElement && unresolvedKeyframes.length < 2) {
+            unresolvedKeyframes.unshift(getComputedStyle(element, name));
+        }
+        animationOptions.keyframes = unresolvedKeyframes;
+    }
+    /**
+     * Step 3: Create new animations (write)
+     */
+    const animations = [];
+    for (let i = 0; i < animationDefinitions.length; i++) {
+        const { map, key, options: animationOptions } = animationDefinitions[i];
+        const animation = new NativeAnimation(animationOptions);
+        map.set(key, animation);
+        animation.finished.finally(() => map.delete(key));
+        animations.push(animation);
     }
     return animations;
 }