motion 12.7.3 → 12.7.5-alpha.0

package/dist/es/motion-dom/dist/es/animation/NativeAnimationExtended.mjs

@@ -0,0 +1,65 @@
+import { JSAnimation } from './JSAnimation.mjs';
+import { NativeAnimation } from './NativeAnimation.mjs';
+import { replaceTransitionType } from './utils/replace-transition-type.mjs';
+import { replaceStringEasing } from './waapi/utils/unsupported-easing.mjs';
+import { secondsToMilliseconds } from '../../../../motion-utils/dist/es/time-conversion.mjs';
+
+/**
+ * 10ms is chosen here as it strikes a balance between smooth
+ * results (more than one keyframe per frame at 60fps) and
+ * keyframe quantity.
+ */
+const sampleDelta = 10; //ms
+class NativeAnimationExtended extends NativeAnimation {
+    constructor(options) {
+        /**
+         * The base NativeAnimation function only supports a subset
+         * of Motion easings, and WAAPI also only supports some
+         * easing functions via string/cubic-bezier definitions.
+         *
+         * This function replaces those unsupported easing functions
+         * with a JS easing function. This will later get compiled
+         * to a linear() easing function.
+         */
+        replaceStringEasing(options);
+        /**
+         * Ensure we replace the transition type with a generator function
+         * before passing to WAAPI.
+         *
+         * TODO: Does this have a better home? It could be shared with
+         * JSAnimation.
+         */
+        replaceTransitionType(options);
+        super(options);
+        if (options.startTime) {
+            this.startTime = options.startTime;
+        }
+        this.options = options;
+    }
+    /**
+     * WAAPI doesn't natively have any interruption capabilities.
+     *
+     * Rather than read commited styles back out of the DOM, we can
+     * create a renderless JS animation and sample it twice to calculate
+     * its current value, "previous" value, and therefore allow
+     * Motion to calculate velocity for any subsequent animation.
+     */
+    updateMotionValue(value) {
+        const { motionValue, onUpdate, onComplete, element, ...options } = this.options;
+        if (!motionValue)
+            return;
+        if (value !== undefined) {
+            motionValue.set(value);
+            return;
+        }
+        const sampleAnimation = new JSAnimation({
+            ...options,
+            autoplay: false,
+        });
+        const sampleTime = secondsToMilliseconds(this.finishedTime ?? this.time);
+        motionValue.setWithVelocity(sampleAnimation.sample(sampleTime - sampleDelta).value, sampleAnimation.sample(sampleTime).value, sampleDelta);
+        sampleAnimation.stop();
+    }
+}
+
+export { NativeAnimationExtended };

package/dist/es/motion-dom/dist/es/animation/NativeAnimationWrapper.mjs

@@ -0,0 +1,14 @@
+import { NativeAnimation } from './NativeAnimation.mjs';
+
+class NativeAnimationWrapper extends NativeAnimation {
+    constructor(animation) {
+        super();
+        this.animation = animation;
+        animation.onfinish = () => {
+            this.finishedTime = this.time;
+            this.notifyFinished();
+        };
+    }
+}
+
+export { NativeAnimationWrapper };

package/dist/es/{framer-motion/dist/es/animation/animators → motion-dom/dist/es/animation}/drivers/driver-frameloop.mjs

@@ -1,5 +1,5 @@
-import { frame, cancelFrame, frameData } from '../../../../../../motion-dom/dist/es/frameloop/frame.mjs';
-import { time } from '../../../../../../motion-dom/dist/es/frameloop/sync-time.mjs';
+import { time } from '../../frameloop/sync-time.mjs';
+import { frame, cancelFrame, frameData } from '../../frameloop/frame.mjs';
 
 const frameloopDriver = (update) => {
     const passTimestamp = ({ timestamp }) => update(timestamp);

package/dist/es/{framer-motion → motion-dom}/dist/es/animation/generators/keyframes.mjs

@@ -1,9 +1,9 @@
-import { easeInOut } from '../../easing/ease.mjs';
-import { isEasingArray } from '../../easing/utils/is-easing-array.mjs';
-import { easingDefinitionToFunction } from '../../easing/utils/map.mjs';
 import { interpolate } from '../../utils/interpolate.mjs';
-import { defaultOffset } from '../../utils/offsets/default.mjs';
-import { convertOffsetToTimes } from '../../utils/offsets/time.mjs';
+import { defaultOffset } from '../keyframes/offsets/default.mjs';
+import { convertOffsetToTimes } from '../keyframes/offsets/time.mjs';
+import { easeInOut } from '../../../../../motion-utils/dist/es/easing/ease.mjs';
+import { isEasingArray } from '../../../../../motion-utils/dist/es/easing/utils/is-easing-array.mjs';
+import { easingDefinitionToFunction } from '../../../../../motion-utils/dist/es/easing/utils/map.mjs';
 
 function defaultEasing(values, easing) {
     return values.map(() => easing || easeInOut).splice(0, values.length - 1);

package/dist/es/{framer-motion → motion-dom}/dist/es/animation/generators/spring/find.mjs

@@ -1,7 +1,7 @@
-import { clamp } from '../../../utils/clamp.mjs';
 import { springDefaults } from './defaults.mjs';
 import { warning } from '../../../../../../motion-utils/dist/es/errors.mjs';
 import { secondsToMilliseconds, millisecondsToSeconds } from '../../../../../../motion-utils/dist/es/time-conversion.mjs';
+import { clamp } from '../../../../../../motion-utils/dist/es/clamp.mjs';
 
 const safeMin = 0.001;
 function findSpring({ duration = springDefaults.duration, bounce = springDefaults.bounce, velocity = springDefaults.velocity, mass = springDefaults.mass, }) {

package/dist/es/{framer-motion → motion-dom}/dist/es/animation/generators/spring/index.mjs

@@ -1,12 +1,11 @@
-import { clamp } from '../../../utils/clamp.mjs';
+import { generateLinearEasing } from '../../waapi/utils/linear.mjs';
+import { calcGeneratorDuration, maxGeneratorDuration } from '../utils/calc-duration.mjs';
+import { createGeneratorEasing } from '../utils/create-generator-easing.mjs';
 import { calcGeneratorVelocity } from '../utils/velocity.mjs';
 import { springDefaults } from './defaults.mjs';
 import { findSpring, calcAngularFreq } from './find.mjs';
 import { millisecondsToSeconds, secondsToMilliseconds } from '../../../../../../motion-utils/dist/es/time-conversion.mjs';
-import { createGeneratorEasing } from '../../../../../../motion-dom/dist/es/animation/generators/utils/create-generator-easing.mjs';
-import { supportsLinearEasing } from '../../../../../../motion-dom/dist/es/utils/supports/linear-easing.mjs';
-import { calcGeneratorDuration, maxGeneratorDuration } from '../../../../../../motion-dom/dist/es/animation/generators/utils/calc-duration.mjs';
-import { generateLinearEasing } from '../../../../../../motion-dom/dist/es/animation/waapi/utils/linear.mjs';
+import { clamp } from '../../../../../../motion-utils/dist/es/clamp.mjs';
 
 const durationKeys = ["duration", "bounce"];
 const physicsKeys = ["stiffness", "damping", "mass"];
@@ -168,7 +167,7 @@ function spring(optionsOrVisualDuration = springDefaults.visualDuration, bounce
 }
 spring.applyToOptions = (options) => {
     const generatorOptions = createGeneratorEasing(options, 100, spring);
-    options.ease = supportsLinearEasing() ? generatorOptions.ease : "easeOut";
+    options.ease = generatorOptions.ease;
     options.duration = secondsToMilliseconds(generatorOptions.duration);
     options.type = "keyframes";
     return options;

package/dist/es/{framer-motion/dist/es/render/dom → motion-dom/dist/es/animation/keyframes}/DOMKeyframesResolver.mjs

@@ -1,11 +1,11 @@
-import { isNone } from '../../animation/utils/is-none.mjs';
-import { positionalKeys } from '../html/utils/keys-position.mjs';
-import { makeNoneKeyframesAnimatable } from '../html/utils/make-none-animatable.mjs';
-import { KeyframeResolver } from '../utils/KeyframesResolver.mjs';
-import { getVariableValue } from './utils/css-variables-conversion.mjs';
-import { isCSSVariableToken } from './utils/is-css-variable.mjs';
+import { positionalKeys } from '../../render/utils/keys-position.mjs';
+import { findDimensionValueType } from '../../value/types/dimensions.mjs';
+import { getVariableValue } from '../utils/css-variables-conversion.mjs';
+import { isCSSVariableToken } from '../utils/is-css-variable.mjs';
+import { KeyframeResolver } from './KeyframesResolver.mjs';
+import { isNone } from './utils/is-none.mjs';
+import { makeNoneKeyframesAnimatable } from './utils/make-none-animatable.mjs';
 import { isNumOrPxType, positionalValues } from './utils/unit-conversion.mjs';
-import { findDimensionValueType } from './value-types/dimensions.mjs';
 
 class DOMKeyframesResolver extends KeyframeResolver {
     constructor(unresolvedKeyframes, onComplete, name, motionValue, element) {
@@ -80,7 +80,8 @@ class DOMKeyframesResolver extends KeyframeResolver {
         const { unresolvedKeyframes, name } = this;
         const noneKeyframeIndexes = [];
         for (let i = 0; i < unresolvedKeyframes.length; i++) {
-            if (isNone(unresolvedKeyframes[i])) {
+            if (unresolvedKeyframes[i] === null ||
+                isNone(unresolvedKeyframes[i])) {
                 noneKeyframeIndexes.push(i);
             }
         }

package/dist/es/{framer-motion/dist/es/render/utils → motion-dom/dist/es/animation/keyframes}/KeyframesResolver.mjs

@@ -1,9 +1,11 @@
-import { removeNonTranslationalTransform } from '../dom/utils/unit-conversion.mjs';
-import { frame } from '../../../../../motion-dom/dist/es/frameloop/frame.mjs';
+import { fillWildcards } from './utils/fill-wildcards.mjs';
+import { removeNonTranslationalTransform } from './utils/unit-conversion.mjs';
+import { frame } from '../../frameloop/frame.mjs';
 
 const toResolve = new Set();
 let isScheduled = false;
 let anyNeedsMeasurement = false;
+let isForced = false;
 function measureAllKeyframes() {
     if (anyNeedsMeasurement) {
         const resolversToMeasure = Array.from(toResolve).filter((resolver) => resolver.needsMeasurement);
@@ -43,7 +45,7 @@ function measureAllKeyframes() {
     }
     anyNeedsMeasurement = false;
     isScheduled = false;
-    toResolve.forEach((resolver) => resolver.complete());
+    toResolve.forEach((resolver) => resolver.complete(isForced));
     toResolve.clear();
 }
 function readAllKeyframes() {
@@ -55,8 +57,10 @@ function readAllKeyframes() {
     });
 }
 function flushKeyframeResolvers() {
+    isForced = true;
     readAllKeyframes();
     measureAllKeyframes();
+    isForced = false;
 }
 class KeyframeResolver {
     constructor(unresolvedKeyframes, onComplete, name, motionValue, element, isAsync = false) {
@@ -105,47 +109,36 @@ class KeyframeResolver {
     }
     readKeyframes() {
         const { unresolvedKeyframes, name, element, motionValue } = this;
-        /**
-         * If a keyframe is null, we hydrate it either by reading it from
-         * the instance, or propagating from previous keyframes.
-         */
-        for (let i = 0; i < unresolvedKeyframes.length; i++) {
-            if (unresolvedKeyframes[i] === null) {
-                /**
-                 * If the first keyframe is null, we need to find its value by sampling the element
-                 */
-                if (i === 0) {
-                    const currentValue = motionValue?.get();
-                    const finalKeyframe = unresolvedKeyframes[unresolvedKeyframes.length - 1];
-                    if (currentValue !== undefined) {
-                        unresolvedKeyframes[0] = currentValue;
-                    }
-                    else if (element && name) {
-                        const valueAsRead = element.readValue(name, finalKeyframe);
-                        if (valueAsRead !== undefined && valueAsRead !== null) {
-                            unresolvedKeyframes[0] = valueAsRead;
-                        }
-                    }
-                    if (unresolvedKeyframes[0] === undefined) {
-                        unresolvedKeyframes[0] = finalKeyframe;
-                    }
-                    if (motionValue && currentValue === undefined) {
-                        motionValue.set(unresolvedKeyframes[0]);
-                    }
-                }
-                else {
-                    unresolvedKeyframes[i] = unresolvedKeyframes[i - 1];
+        // If initial keyframe is null we need to read it from the DOM
+        if (unresolvedKeyframes[0] === null) {
+            const currentValue = motionValue?.get();
+            // TODO: This doesn't work if the final keyframe is a wildcard
+            const finalKeyframe = unresolvedKeyframes[unresolvedKeyframes.length - 1];
+            if (currentValue !== undefined) {
+                unresolvedKeyframes[0] = currentValue;
+            }
+            else if (element && name) {
+                const valueAsRead = element.readValue(name, finalKeyframe);
+                if (valueAsRead !== undefined && valueAsRead !== null) {
+                    unresolvedKeyframes[0] = valueAsRead;
                 }
             }
+            if (unresolvedKeyframes[0] === undefined) {
+                unresolvedKeyframes[0] = finalKeyframe;
+            }
+            if (motionValue && currentValue === undefined) {
+                motionValue.set(unresolvedKeyframes[0]);
+            }
         }
+        fillWildcards(unresolvedKeyframes);
     }
     setFinalKeyframe() { }
     measureInitialState() { }
     renderEndStyles() { }
     measureEndState() { }
-    complete() {
+    complete(isForced = false) {
         this.isComplete = true;
-        this.onComplete(this.unresolvedKeyframes, this.finalKeyframe);
+        this.onComplete(this.unresolvedKeyframes, this.finalKeyframe, isForced);
         toResolve.delete(this);
     }
     cancel() {

package/dist/es/motion-dom/dist/es/animation/keyframes/get-final.mjs

@@ -1,9 +1,8 @@
 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;

package/dist/es/{framer-motion/dist/es/utils → motion-dom/dist/es/animation/keyframes}/offsets/fill.mjs

@@ -1,5 +1,5 @@
-import { mixNumber } from '../mix/number.mjs';
-import { progress } from '../../../../../motion-utils/dist/es/progress.mjs';
+import { mixNumber } from '../../../utils/mix/number.mjs';
+import { progress } from '../../../../../../motion-utils/dist/es/progress.mjs';
 
 function fillOffset(offset, remaining) {
     const min = offset[offset.length - 1];

package/dist/es/motion-dom/dist/es/animation/keyframes/utils/apply-px-defaults.mjs

@@ -0,0 +1,11 @@
+import { pxValues } from '../../waapi/utils/px-values.mjs';
+
+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";
+        }
+    }
+}
+
+export { applyPxDefaults };

package/dist/es/motion-dom/dist/es/animation/keyframes/utils/fill-wildcards.mjs

@@ -0,0 +1,7 @@
+function fillWildcards(keyframes) {
+    for (let i = 1; i < keyframes.length; i++) {
+        keyframes[i] ?? (keyframes[i] = keyframes[i - 1]);
+    }
+}
+
+export { fillWildcards };

package/dist/es/{framer-motion/dist/es/animation → motion-dom/dist/es/animation/keyframes}/utils/is-none.mjs

@@ -1,4 +1,4 @@
-import { isZeroValueString } from '../../utils/is-zero-value-string.mjs';
+import { isZeroValueString } from '../../../../../../motion-utils/dist/es/is-zero-value-string.mjs';
 
 function isNone(value) {
     if (typeof value === "number") {

package/dist/es/{framer-motion/dist/es/render/html → motion-dom/dist/es/animation/keyframes}/utils/make-none-animatable.mjs

@@ -1,5 +1,5 @@
 import { analyseComplexValue } from '../../../value/types/complex/index.mjs';
-import { getAnimatableNone } from '../../dom/value-types/animatable-none.mjs';
+import { getAnimatableNone } from '../../../value/types/utils/animatable-none.mjs';
 
 /**
  * If we encounter keyframes like "none" or "0" and we also have keyframes like

package/dist/es/{framer-motion/dist/es/render/dom → motion-dom/dist/es/animation/keyframes}/utils/unit-conversion.mjs

@@ -1,7 +1,7 @@
+import { parseValueFromTransform } from '../../../render/dom/parse-transform.mjs';
+import { transformPropOrder } from '../../../render/utils/keys-transform.mjs';
 import { number } from '../../../value/types/numbers/index.mjs';
 import { px } from '../../../value/types/numbers/units.mjs';
-import { transformPropOrder } from '../../html/utils/keys-transform.mjs';
-import { parseValueFromTransform } from '../../html/utils/parse-transform.mjs';
 
 const isNumOrPxType = (v) => v === number || v === px;
 const transformKeys = new Set(["x", "y", "z"]);

package/dist/es/motion-dom/dist/es/animation/utils/WithPromise.mjs

@@ -0,0 +1,28 @@
+class WithPromise {
+    constructor() {
+        this.count = 0;
+        this.updateFinished();
+    }
+    get finished() {
+        return this._finished;
+    }
+    updateFinished() {
+        this.count++;
+        this._finished = new Promise((resolve) => {
+            this.resolve = resolve;
+        });
+    }
+    notifyFinished() {
+        this.resolve();
+    }
+    /**
+     * Allows the animation to be awaited.
+     *
+     * @deprecated Use `finished` instead.
+     */
+    then(onResolve, onReject) {
+        return this.finished.then(onResolve, onReject);
+    }
+}
+
+export { WithPromise };

package/dist/es/motion-dom/dist/es/animation/utils/active-animations.mjs

@@ -0,0 +1,9 @@
+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;
+}
+
+export { animationMapKey, getAnimationMap };

package/dist/es/{framer-motion/dist/es/animation/animators → motion-dom/dist/es/animation}/utils/can-animate.mjs

@@ -1,6 +1,6 @@
-import { isAnimatable } from '../../utils/is-animatable.mjs';
-import { warning } from '../../../../../../motion-utils/dist/es/errors.mjs';
-import { isGenerator } from '../../../../../../motion-dom/dist/es/animation/generators/utils/is-generator.mjs';
+import { isGenerator } from '../generators/utils/is-generator.mjs';
+import { isAnimatable } from './is-animatable.mjs';
+import { warning } from '../../../../../motion-utils/dist/es/errors.mjs';
 
 function hasKeyframesChanged(keyframes) {
     const current = keyframes[0];

package/dist/es/{framer-motion/dist/es/render/dom → motion-dom/dist/es/animation}/utils/css-variables-conversion.mjs

@@ -1,6 +1,6 @@
-import { isNumericalString } from '../../../utils/is-numerical-string.mjs';
 import { isCSSVariableToken } from './is-css-variable.mjs';
-import { invariant } from '../../../../../../motion-utils/dist/es/errors.mjs';
+import { invariant } from '../../../../../motion-utils/dist/es/errors.mjs';
+import { isNumericalString } from '../../../../../motion-utils/dist/es/is-numerical-string.mjs';
 
 /**
  * Parse Framer's special CSS variable format into a CSS token and a fallback.

package/dist/es/motion-dom/dist/es/animation/utils/replace-transition-type.mjs

@@ -0,0 +1,18 @@
+import { inertia } from '../generators/inertia.mjs';
+import { keyframes } from '../generators/keyframes.mjs';
+import { spring } from '../generators/spring/index.mjs';
+
+const transitionTypeMap = {
+    decay: inertia,
+    inertia,
+    tween: keyframes,
+    keyframes: keyframes,
+    spring,
+};
+function replaceTransitionType(transition) {
+    if (typeof transition.type === "string") {
+        transition.type = transitionTypeMap[transition.type];
+    }
+}
+
+export { replaceTransitionType };

package/dist/es/motion-dom/dist/es/animation/waapi/easing/is-supported.mjs

@@ -1,6 +1,6 @@
-import { isBezierDefinition } from '../../../utils/is-bezier-definition.mjs';
 import { supportsLinearEasing } from '../../../utils/supports/linear-easing.mjs';
 import { supportedWaapiEasing } from './supported.mjs';
+import { isBezierDefinition } from '../../../../../../motion-utils/dist/es/easing/utils/is-bezier-definition.mjs';
 
 function isWaapiSupportedEasing(easing) {
     return Boolean((typeof easing === "function" && supportsLinearEasing()) ||

package/dist/es/motion-dom/dist/es/animation/waapi/easing/map-easing.mjs

@@ -1,15 +1,17 @@
-import { isBezierDefinition } from '../../../utils/is-bezier-definition.mjs';
 import { supportsLinearEasing } from '../../../utils/supports/linear-easing.mjs';
 import { generateLinearEasing } from '../utils/linear.mjs';
 import { cubicBezierAsString } from './cubic-bezier.mjs';
 import { supportedWaapiEasing } from './supported.mjs';
+import { isBezierDefinition } from '../../../../../../motion-utils/dist/es/easing/utils/is-bezier-definition.mjs';
 
 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);

package/dist/es/motion-dom/dist/es/animation/waapi/start-waapi-animation.mjs

@@ -2,7 +2,7 @@ import { activeAnimations } from '../../stats/animation-count.mjs';
 import { statsBuffer } from '../../stats/buffer.mjs';
 import { mapEasingToNativeEasing } from './easing/map-easing.mjs';
 
-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,
     };
@@ -17,15 +17,17 @@ function startWaapiAnimation(element, valueName, keyframes, { delay = 0, duratio
     if (statsBuffer.value) {
         activeAnimations.waapi++;
     }
-    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);
     if (statsBuffer.value) {
         animation.finished.finally(() => {
             activeAnimations.waapi--;

package/dist/es/motion-dom/dist/es/animation/waapi/supports/waapi.mjs

@@ -0,0 +1,39 @@
+import { memo } from '../../../../../../motion-utils/dist/es/memo.mjs';
+
+/**
+ * A list of values that can be hardware-accelerated.
+ */
+const acceleratedValues = new Set([
+    "opacity",
+    "clipPath",
+    "filter",
+    "transform",
+    // TODO: Can be accelerated but currently disabled until https://issues.chromium.org/issues/41491098 is resolved
+    // or until we implement support for linear() easing.
+    // "background-color"
+]);
+const supportsWaapi = /*@__PURE__*/ memo(() => Object.hasOwnProperty.call(Element.prototype, "animate"));
+function supportsBrowserAnimation(options) {
+    const { motionValue, name, repeatDelay, repeatType, damping, type } = options;
+    if (!motionValue ||
+        !motionValue.owner ||
+        !(motionValue.owner.current instanceof HTMLElement)) {
+        return false;
+    }
+    const { onUpdate, transformTemplate } = motionValue.owner.getProps();
+    return (supportsWaapi() &&
+        name &&
+        acceleratedValues.has(name) &&
+        (name !== "transform" || !transformTemplate) &&
+        /**
+         * If we're outputting values to onUpdate then we can't use WAAPI as there's
+         * no way to read the value from WAAPI every frame.
+         */
+        !onUpdate &&
+        !repeatDelay &&
+        repeatType !== "mirror" &&
+        damping !== 0 &&
+        type !== "inertia");
+}
+
+export { supportsBrowserAnimation };

package/dist/es/motion-dom/dist/es/animation/waapi/utils/apply-generator.mjs

@@ -1,7 +1,8 @@
+import { supportsLinearEasing } from '../../../utils/supports/linear-easing.mjs';
 import { isGenerator } from '../../generators/utils/is-generator.mjs';
 
 function applyGeneratorOptions({ type, ...options }) {
-    if (isGenerator(type)) {
+    if (isGenerator(type) && supportsLinearEasing()) {
         return type.applyToOptions(options);
     }
     else {

package/dist/es/motion-dom/dist/es/animation/waapi/utils/unsupported-easing.mjs

@@ -0,0 +1,20 @@
+import { anticipate } from '../../../../../../motion-utils/dist/es/easing/anticipate.mjs';
+import { backInOut } from '../../../../../../motion-utils/dist/es/easing/back.mjs';
+import { circInOut } from '../../../../../../motion-utils/dist/es/easing/circ.mjs';
+
+const unsupportedEasingFunctions = {
+    anticipate,
+    backInOut,
+    circInOut,
+};
+function isUnsupportedEase(key) {
+    return key in unsupportedEasingFunctions;
+}
+function replaceStringEasing(transition) {
+    if (typeof transition.ease === "string" &&
+        isUnsupportedEase(transition.ease)) {
+        transition.ease = unsupportedEasingFunctions[transition.ease];
+    }
+}
+
+export { replaceStringEasing };

package/dist/es/motion-dom/dist/es/frameloop/batcher.mjs

@@ -16,7 +16,7 @@ function createRenderBatcher(scheduleNextBatch, allowKeepAlive) {
         acc[key] = createRenderStep(flagRunNextFrame, allowKeepAlive ? key : undefined);
         return acc;
     }, {});
-    const { read, resolveKeyframes, update, preRender, render, postRender } = steps;
+    const { setup, read, resolveKeyframes, update, preRender, render, postRender, } = steps;
     const processBatch = () => {
         const timestamp = MotionGlobalConfig.useManualTiming
             ? state.timestamp
@@ -30,6 +30,7 @@ function createRenderBatcher(scheduleNextBatch, allowKeepAlive) {
         state.timestamp = timestamp;
         state.isProcessing = true;
         // Unrolled render loop for better per-frame performance
+        setup.process(state);
         read.process(state);
         resolveKeyframes.process(state);
         update.process(state);

package/dist/es/motion-dom/dist/es/frameloop/order.mjs

@@ -1,4 +1,5 @@
 const stepsOrder = [
+    "setup", // Compute
     "read", // Read
     "resolveKeyframes", // Write/Read/Write/Read
     "update", // Compute

package/dist/es/motion-dom/dist/es/render/dom/is-css-var.mjs

@@ -0,0 +1,3 @@
+const isCSSVar = (name) => name.startsWith("--");
+
+export { isCSSVar };

package/dist/es/motion-dom/dist/es/render/dom/style-computed.mjs

@@ -0,0 +1,10 @@
+import { isCSSVar } from './is-css-var.mjs';
+
+function getComputedStyle(element, name) {
+    const computedStyle = window.getComputedStyle(element);
+    return isCSSVar(name)
+        ? computedStyle.getPropertyValue(name)
+        : computedStyle[name];
+}
+
+export { getComputedStyle };

package/dist/es/motion-dom/dist/es/render/dom/style-set.mjs

@@ -0,0 +1,9 @@
+import { isCSSVar } from './is-css-var.mjs';
+
+function setStyle(element, name, value) {
+    isCSSVar(name)
+        ? element.style.setProperty(name, value)
+        : (element.style[name] = value);
+}
+
+export { setStyle };

package/dist/es/{framer-motion/dist/es/render/html → motion-dom/dist/es/render}/utils/keys-transform.mjs

@@ -23,6 +23,6 @@ const transformPropOrder = [
 /**
  * A quick lookup for transform props.
  */
-const transformProps = new Set(transformPropOrder);
+const transformProps = /*@__PURE__*/ (() => new Set(transformPropOrder))();
 
 export { transformPropOrder, transformProps };

package/dist/es/{framer-motion/dist/es/render/dom → motion-dom/dist/es}/scroll/observe.mjs

@@ -1,4 +1,4 @@
-import { frame, cancelFrame } from '../../../../../../motion-dom/dist/es/frameloop/frame.mjs';
+import { frame, cancelFrame } from '../frameloop/frame.mjs';
 
 function observeTimeline(update, timeline) {
     let prevProgress;