motion 12.7.4 → 12.7.5-alpha.0

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;

package/dist/es/motion-dom/dist/es/stats/index.mjs

@@ -44,6 +44,7 @@ function reportStats() {
     cancelFrame(record);
     const summary = {
         frameloop: {
+            setup: summarise(value.frameloop.setup),
             rate: summarise(value.frameloop.rate),
             read: summarise(value.frameloop.read),
             resolveKeyframes: summarise(value.frameloop.resolveKeyframes),
@@ -81,6 +82,7 @@ function recordStats() {
     const newStatsBuffer = statsBuffer;
     newStatsBuffer.value = {
         frameloop: {
+            setup: [],
             rate: [],
             read: [],
             resolveKeyframes: [],

package/dist/es/{framer-motion → motion-dom}/dist/es/utils/interpolate.mjs

@@ -1,13 +1,14 @@
-import { clamp } from './clamp.mjs';
 import { mix } from './mix/index.mjs';
-import { pipe } from './pipe.mjs';
 import { invariant } from '../../../../motion-utils/dist/es/errors.mjs';
+import { clamp } from '../../../../motion-utils/dist/es/clamp.mjs';
+import { MotionGlobalConfig } from '../../../../motion-utils/dist/es/global-config.mjs';
 import { noop } from '../../../../motion-utils/dist/es/noop.mjs';
+import { pipe } from '../../../../motion-utils/dist/es/pipe.mjs';
 import { progress } from '../../../../motion-utils/dist/es/progress.mjs';
 
 function createMixers(output, ease, customMixer) {
     const mixers = [];
-    const mixerFactory = customMixer || mix;
+    const mixerFactory = customMixer || MotionGlobalConfig.mix || mix;
     const numMixers = output.length - 1;
     for (let i = 0; i < numMixers; i++) {
         let mixer = mixerFactory(output[i], output[i + 1]);

package/dist/es/{framer-motion → motion-dom}/dist/es/utils/mix/color.mjs

@@ -1,9 +1,9 @@
-import { mixNumber } from './number.mjs';
-import { hslaToRgba } from '../hsla-to-rgba.mjs';
 import { hex } from '../../value/types/color/hex.mjs';
-import { rgba } from '../../value/types/color/rgba.mjs';
 import { hsla } from '../../value/types/color/hsla.mjs';
+import { hslaToRgba } from '../../value/types/color/hsla-to-rgba.mjs';
+import { rgba } from '../../value/types/color/rgba.mjs';
 import { mixImmediate } from './immediate.mjs';
+import { mixNumber } from './number.mjs';
 import { warning } from '../../../../../motion-utils/dist/es/errors.mjs';
 
 // Linear color space blending

package/dist/es/{framer-motion → motion-dom}/dist/es/utils/mix/complex.mjs

@@ -1,11 +1,11 @@
-import { mixNumber as mixNumber$1 } from './number.mjs';
-import { mixColor } from './color.mjs';
-import { pipe } from '../pipe.mjs';
+import { isCSSVariableToken } from '../../animation/utils/is-css-variable.mjs';
 import { color } from '../../value/types/color/index.mjs';
 import { complex, analyseComplexValue } from '../../value/types/complex/index.mjs';
-import { isCSSVariableToken } from '../../render/dom/utils/is-css-variable.mjs';
-import { invisibleValues, mixVisibility } from './visibility.mjs';
+import { mixColor } from './color.mjs';
 import { mixImmediate } from './immediate.mjs';
+import { mixNumber as mixNumber$1 } from './number.mjs';
+import { invisibleValues, mixVisibility } from './visibility.mjs';
+import { pipe } from '../../../../../motion-utils/dist/es/pipe.mjs';
 import { warning } from '../../../../../motion-utils/dist/es/errors.mjs';
 
 function mixNumber(a, b) {

package/dist/es/motion-dom/dist/es/value/index.mjs

@@ -32,7 +32,7 @@ class MotionValue {
          * This will be replaced by the build step with the latest version number.
          * When MotionValues are provided to motion components, warn if versions are mixed.
          */
-        this.version = "12.7.4";
+        this.version = "12.7.5-alpha.0";
         /**
          * Tracks whether this value can output a velocity. Currently this is only true
          * if the value is numerical, but we might be able to widen the scope here and support
@@ -176,6 +176,8 @@ class MotionValue {
      * @public
      */
     set(v, render = true) {
+        if (v === "none")
+            console.trace();
         if (!render || !this.passiveEffect) {
             this.updateAndNotify(v, render);
         }

package/dist/es/{framer-motion → motion-dom}/dist/es/value/types/color/rgba.mjs

@@ -1,7 +1,7 @@
-import { clamp } from '../../../utils/clamp.mjs';
-import { alpha, number } from '../numbers/index.mjs';
+import { number, alpha } from '../numbers/index.mjs';
 import { sanitize } from '../utils/sanitize.mjs';
 import { isColorString, splitColor } from './utils.mjs';
+import { clamp } from '../../../../../../motion-utils/dist/es/clamp.mjs';
 
 const clampRgbUnit = (v) => clamp(0, 255, v);
 const rgbUnit = {

package/dist/es/{framer-motion/dist/es/render/dom/value-types → motion-dom/dist/es/value/types}/dimensions.mjs

@@ -1,7 +1,7 @@
-import { number } from '../../../value/types/numbers/index.mjs';
-import { px, percent, degrees, vw, vh } from '../../../value/types/numbers/units.mjs';
+import { auto } from './auto.mjs';
+import { number } from './numbers/index.mjs';
+import { px, percent, degrees, vw, vh } from './numbers/units.mjs';
 import { testValueType } from './test.mjs';
-import { auto } from './type-auto.mjs';
 
 /**
  * A list of value types commonly used for dimensions

package/dist/es/{framer-motion/dist/es/render/dom/value-types/type-int.mjs → motion-dom/dist/es/value/types/int.mjs}

@@ -1,4 +1,4 @@
-import { number } from '../../../value/types/numbers/index.mjs';
+import { number } from './numbers/index.mjs';
 
 const int = {
     ...number,

package/dist/es/{framer-motion/dist/es/render/dom/value-types → motion-dom/dist/es/value/types/maps}/defaults.mjs

@@ -1,5 +1,5 @@
-import { color } from '../../../value/types/color/index.mjs';
-import { filter } from '../../../value/types/complex/filter.mjs';
+import { color } from '../color/index.mjs';
+import { filter } from '../complex/filter.mjs';
 import { numberValueTypes } from './number.mjs';
 
 /**

package/dist/es/{framer-motion/dist/es/render/dom/value-types/number-browser.mjs → motion-dom/dist/es/value/types/maps/number.mjs}

@@ -1,6 +1,9 @@
-import { px } from '../../../value/types/numbers/units.mjs';
+import { int } from '../int.mjs';
+import { alpha } from '../numbers/index.mjs';
+import { px } from '../numbers/units.mjs';
+import { transformValueTypes } from './transform.mjs';
 
-const browserNumberValueTypes = {
+const numberValueTypes = {
     // Border props
     borderWidth: px,
     borderTopWidth: px,
@@ -36,6 +39,13 @@ const browserNumberValueTypes = {
     // Misc
     backgroundPositionX: px,
     backgroundPositionY: px,
+    ...transformValueTypes,
+    zIndex: int,
+    size: px,
+    // SVG
+    fillOpacity: alpha,
+    strokeOpacity: alpha,
+    numOctaves: int,
 };
 
-export { browserNumberValueTypes };
+export { numberValueTypes };

package/dist/es/{framer-motion/dist/es/render/dom/value-types → motion-dom/dist/es/value/types/maps}/transform.mjs

@@ -1,5 +1,5 @@
-import { scale, alpha } from '../../../value/types/numbers/index.mjs';
-import { degrees, px, progressPercentage } from '../../../value/types/numbers/units.mjs';
+import { scale, alpha } from '../numbers/index.mjs';
+import { degrees, px, progressPercentage } from '../numbers/units.mjs';
 
 const transformValueTypes = {
     rotate: degrees,

package/dist/es/{framer-motion → motion-dom}/dist/es/value/types/numbers/index.mjs

@@ -1,4 +1,4 @@
-import { clamp } from '../../../utils/clamp.mjs';
+import { clamp } from '../../../../../../motion-utils/dist/es/clamp.mjs';
 
 const number = {
     test: (v) => typeof v === "number",

package/dist/es/{framer-motion → motion-dom}/dist/es/value/types/numbers/units.mjs

@@ -1,3 +1,4 @@
+/*#__NO_SIDE_EFFECTS__*/
 const createUnitType = (unit) => ({
     test: (v) => typeof v === "string" && v.endsWith(unit) && v.split(" ").length === 1,
     parse: parseFloat,
@@ -8,10 +9,10 @@ const percent = /*@__PURE__*/ createUnitType("%");
 const px = /*@__PURE__*/ createUnitType("px");
 const vh = /*@__PURE__*/ createUnitType("vh");
 const vw = /*@__PURE__*/ createUnitType("vw");
-const progressPercentage = {
+const progressPercentage = /*@__PURE__*/ (() => ({
     ...percent,
     parse: (v) => percent.parse(v) / 100,
     transform: (v) => percent.transform(v * 100),
-};
+}))();
 
 export { degrees, percent, progressPercentage, px, vh, vw };

package/dist/es/{framer-motion/dist/es/render/dom/value-types → motion-dom/dist/es/value/types/utils}/animatable-none.mjs

@@ -1,12 +1,12 @@
-import { complex } from '../../../value/types/complex/index.mjs';
-import { filter } from '../../../value/types/complex/filter.mjs';
-import { getDefaultValueType } from './defaults.mjs';
+import { complex } from '../complex/index.mjs';
+import { filter } from '../complex/filter.mjs';
+import { getDefaultValueType } from '../maps/defaults.mjs';
 
 function getAnimatableNone(key, value) {
     let defaultValueType = getDefaultValueType(key);
     if (defaultValueType !== filter)
         defaultValueType = complex;
-    // If value is not recognised as animatable, ie "none", create an animatable version origin based on the target
+    // If value is not recognised as animatable, ie "one", create an animatable version origin based on the target
     return defaultValueType.getAnimatableNone
         ? defaultValueType.getAnimatableNone(value)
         : undefined;

package/dist/es/{framer-motion/dist/es/render/dom/value-types → motion-dom/dist/es/value/types/utils}/find.mjs

@@ -1,7 +1,7 @@
-import { color } from '../../../value/types/color/index.mjs';
-import { complex } from '../../../value/types/complex/index.mjs';
-import { dimensionValueTypes } from './dimensions.mjs';
-import { testValueType } from './test.mjs';
+import { color } from '../color/index.mjs';
+import { complex } from '../complex/index.mjs';
+import { dimensionValueTypes } from '../dimensions.mjs';
+import { testValueType } from '../test.mjs';
 
 /**
  * A list of all ValueTypes

package/dist/es/motion-dom/dist/es/view/index.mjs

@@ -0,0 +1,64 @@
+import { addToQueue } from './queue.mjs';
+import { noop } from '../../../../motion-utils/dist/es/noop.mjs';
+
+class ViewTransitionBuilder {
+    constructor(update, options = {}) {
+        this.currentTarget = "root";
+        this.targets = new Map();
+        this.notifyReady = noop;
+        this.readyPromise = new Promise((resolve) => {
+            this.notifyReady = resolve;
+        });
+        this.update = update;
+        this.options = {
+            interrupt: "wait",
+            ...options,
+        };
+        addToQueue(this);
+    }
+    get(selector) {
+        this.currentTarget = selector;
+        return this;
+    }
+    layout(keyframes, options) {
+        this.updateTarget("layout", keyframes, options);
+        return this;
+    }
+    new(keyframes, options) {
+        this.updateTarget("new", keyframes, options);
+        return this;
+    }
+    old(keyframes, options) {
+        this.updateTarget("old", keyframes, options);
+        return this;
+    }
+    enter(keyframes, options) {
+        this.updateTarget("enter", keyframes, options);
+        return this;
+    }
+    exit(keyframes, options) {
+        this.updateTarget("exit", keyframes, options);
+        return this;
+    }
+    crossfade(options) {
+        this.updateTarget("enter", { opacity: 1 }, options);
+        this.updateTarget("exit", { opacity: 0 }, options);
+        return this;
+    }
+    updateTarget(target, keyframes, options = {}) {
+        const { currentTarget, targets } = this;
+        if (!targets.has(currentTarget)) {
+            targets.set(currentTarget, {});
+        }
+        const targetData = targets.get(currentTarget);
+        targetData[target] = { keyframes, options };
+    }
+    then(resolve, reject) {
+        return this.readyPromise.then(resolve, reject);
+    }
+}
+function animateView(update, defaultOptions = {}) {
+    return new ViewTransitionBuilder(update, defaultOptions);
+}
+
+export { ViewTransitionBuilder, animateView };

package/dist/es/motion-dom/dist/es/view/queue.mjs

@@ -0,0 +1,52 @@
+import { microtask } from '../frameloop/microtask.mjs';
+import { startViewAnimation } from './start.mjs';
+import { removeItem } from '../../../../motion-utils/dist/es/array.mjs';
+
+let builders = [];
+let current = null;
+function next() {
+    current = null;
+    const [nextBuilder] = builders;
+    if (nextBuilder)
+        start(nextBuilder);
+}
+function start(builder) {
+    removeItem(builders, builder);
+    current = builder;
+    startViewAnimation(builder).then((animation) => {
+        builder.notifyReady(animation);
+        animation.finished.finally(next);
+    });
+}
+function processQueue() {
+    /**
+     * Iterate backwards over the builders array. We can ignore the
+     * "wait" animations. If we have an interrupting animation in the
+     * queue then we need to batch all preceeding animations into it.
+     * Currently this only batches the update functions but will also
+     * need to batch the targets.
+     */
+    for (let i = builders.length - 1; i >= 0; i--) {
+        const builder = builders[i];
+        const { interrupt } = builder.options;
+        if (interrupt === "immediate") {
+            const batchedUpdates = builders.slice(0, i + 1).map((b) => b.update);
+            const remaining = builders.slice(i + 1);
+            builder.update = () => {
+                batchedUpdates.forEach((update) => update());
+            };
+            // Put the current builder at the front, followed by any "wait" builders
+            builders = [builder, ...remaining];
+            break;
+        }
+    }
+    if (!current || builders[0]?.options.interrupt === "immediate") {
+        next();
+    }
+}
+function addToQueue(builder) {
+    builders.push(builder);
+    microtask.render(processQueue);
+}
+
+export { addToQueue };