motion 14.5.0 → 14.6.0

package/dist/motion.dev.js

@@ -247,8 +247,8 @@
             : 0.5 * (2 - Math.pow(2, -10 * (p - 1)));
 
     const circIn = (p) => 1 - Math.sin(Math.acos(p));
-    const circOut = reverseEasing(circIn);
-    const circInOut = mirrorEasing(circIn);
+    const circOut = /* @__PURE__ */ reverseEasing(circIn);
+    const circInOut = /* @__PURE__ */ mirrorEasing(circIn);
 
     const easeIn = /*@__PURE__*/ cubicBezier(0.42, 0, 1, 1);
     const easeOut = /*@__PURE__*/ cubicBezier(0, 0, 0.58, 1);
@@ -928,6 +928,11 @@
          */
         let isProcessing = false;
         let flushNextFrame = false;
+        /**
+         * The callback currently running. If it schedules itself with `immediate`
+         * it's left in place, so as before it doesn't run again this step.
+         */
+        let running;
         /**
          * A set of processes which were marked keepAlive when scheduled.
          * A keepAlive process is always also held by a frame queue until
@@ -945,7 +950,7 @@
                 nextFrame.add(callback);
                 runNextFrame();
             }
-            callback(latestFrameData);
+            (running = callback)(latestFrameData);
         }
         const step = {
             /**
@@ -956,6 +961,14 @@
                 const queue = addToCurrentFrame ? thisFrame : nextFrame;
                 if (keepAlive)
                     toKeepAlive.add(callback);
+                /**
+                 * A callback scheduled with `immediate` during processing may
+                 * already have run this step (for instance, a value it reads was
+                 * changed by a later callback). Re-adding moves it to the end of
+                 * the queue, so it runs again. The running callback is excluded,
+                 * so one that re-schedules itself can't loop forever.
+                 */
+                addToCurrentFrame && callback !== running && queue.delete(callback);
                 queue.add(callback);
                 return callback;
             },
@@ -990,6 +1003,7 @@
                 // Clear the frame so no callbacks remain. This is to avoid
                 // memory leaks should this render step not run for a while.
                 thisFrame.clear();
+                running = undefined;
                 isProcessing = false;
                 if (flushNextFrame) {
                     flushNextFrame = false;
@@ -1336,7 +1350,7 @@
         }
         return springOptions;
     }
-    function spring(optionsOrVisualDuration = springDefaults.visualDuration, bounce = springDefaults.bounce) {
+    function springGenerator(optionsOrVisualDuration = springDefaults.visualDuration, bounce = springDefaults.bounce) {
         const options = typeof optionsOrVisualDuration !== "object"
             ? {
                 visualDuration: optionsOrVisualDuration,
@@ -1521,13 +1535,15 @@
         };
         return generator;
     }
-    spring.applyToOptions = (options) => {
-        const generatorOptions = createGeneratorEasing(options, 100, spring);
-        options.ease = generatorOptions.ease;
-        options.duration = secondsToMilliseconds(generatorOptions.duration);
-        options.type = "keyframes";
-        return options;
-    };
+    const spring = /* @__PURE__ */ Object.assign(springGenerator, {
+        applyToOptions: (options) => {
+            const generatorOptions = createGeneratorEasing(options, 100, springGenerator);
+            options.ease = generatorOptions.ease;
+            options.duration = secondsToMilliseconds(generatorOptions.duration);
+            options.type = "keyframes";
+            return options;
+        },
+    });
 
     function inertia({ keyframes, velocity = 0.0, power = 0.8, timeConstant = 325, bounceDamping = 10, bounceStiffness = 500, modifyTarget, min, max, restDelta = 0.5, restSpeed, }) {
         const origin = keyframes[0];
@@ -2609,7 +2625,7 @@
 
     const isNumOrPxType = (v) => v === number || v === px;
     const transformKeys = new Set(["x", "y", "z"]);
-    const nonTranslationalTransformKeys = transformPropOrder.filter((key) => !transformKeys.has(key));
+    const nonTranslationalTransformKeys = /* @__PURE__ */ transformPropOrder.filter((key) => !transformKeys.has(key));
     /**
      * Reset any bounding box-changing transforms so the element can be
      * measured. Returns the values to restore. Values already at their
@@ -2651,6 +2667,8 @@
             ? size
             : size - parseFloat(paddingStart) - parseFloat(paddingEnd);
     }
+    const transformX = ({ transform }) => parseValueFromTransform(transform, "x");
+    const transformY = ({ transform }) => parseValueFromTransform(transform, "y");
     const positionalValues = {
         // Dimensions
         width: ({ width, paddingLeft = "0", paddingRight = "0", boxSizing }, measureBox) => measureDimension(width, measureBox, "x", paddingLeft, paddingRight, boxSizing),
@@ -2665,13 +2683,12 @@
             const { x } = measureBox();
             return parseFloat(left) + (x.max - x.min);
         },
-        // Transform
-        x: ({ transform }) => parseValueFromTransform(transform, "x"),
-        y: ({ transform }) => parseValueFromTransform(transform, "y"),
+        // Transform, including translate longform names
+        x: transformX,
+        y: transformY,
+        translateX: transformX,
+        translateY: transformY,
     };
-    // Alias translate longform names
-    positionalValues.translateX = positionalValues.x;
-    positionalValues.translateY = positionalValues.y;
 
     const toResolve = new Set();
     let isScheduled = false;
@@ -3025,18 +3042,24 @@
             if (this.isStopped)
                 return;
             this.isStopped = true;
-            const { state } = this;
-            if (state === "idle" || state === "finished") {
+            /**
+             * Before its finish event, a finished animation (an instant one is
+             * as soon as it starts) is still showing its end, so it's stopped
+             * like a running one. Otherwise that event would apply its end
+             * over whatever animates the value next.
+             */
+            if (this.state === "idle" || this.finishedTime !== null)
                 return;
-            }
             if (this.updateMotionValue) {
                 this.updateMotionValue();
             }
             else {
                 this.commitStyles();
             }
-            if (!this.isPseudoElement)
+            if (!this.isPseudoElement) {
+                this.animation.onfinish = null;
                 this.cancel();
+            }
         }
         /**
          * WAAPI doesn't natively have any interruption capabilities.
@@ -3345,7 +3368,13 @@
         "borderBottomColor",
         "borderLeftColor",
     ]);
-    const supportsWaapi = /*@__PURE__*/ memo(() => Object.hasOwnProperty.call(Element.prototype, "animate"));
+    /**
+     * WAAPI runs on the browser's clock, so on a manual clock every animation
+     * runs in JS where processFrame can drive it. Set the flag before starting
+     * animations: running WAAPI animations stay on the browser's clock.
+     */
+    const supportsWaapi = () => !MotionGlobalConfig.useManualTiming &&
+        Object.hasOwnProperty.call(Element.prototype, "animate");
     function supportsBrowserAnimation(options) {
         const { motionValue, name, repeatDelay, repeatType, damping, type, keyframes, } = options;
         /**
@@ -5536,12 +5565,8 @@
         }
     }
 
-    function camelToDash(str) {
-        return str.replace(/([A-Z])/g, (match) => `-${match.toLowerCase()}`);
-    }
-
     const optimizedAppearDataId = "framerAppearId";
-    const optimizedAppearDataAttribute = "data-" + camelToDash(optimizedAppearDataId);
+    const optimizedAppearDataAttribute = "data-framer-appear-id";
 
     function getOptimisedAppearId(visualElement) {
         return visualElement.props[optimizedAppearDataAttribute];
@@ -6469,6 +6494,10 @@
     const styleEffect = 
     /*@__PURE__*/ createSelectorEffect(styleSubjectEffect);
 
+    function camelToDash(str) {
+        return str.replace(/([A-Z])/g, (match) => `-${match.toLowerCase()}`);
+    }
+
     function buildHTMLStyles(state, latestValues, transformTemplate) {
         const { style, vars, transformOrigin } = state;
         // Track whether we encounter any transform or transformOrigin values.
@@ -7044,6 +7073,41 @@
     const { schedule: microtask, cancel: cancelMicrotask } = 
     /* @__PURE__ */ createRenderBatcher(queueMicrotask, false);
 
+    /**
+     * Process a frame now, for driving Motion from a loop other than
+     * window.requestAnimationFrame, like an XRSession's during an immersive
+     * WebXR session. Wherever window.requestAnimationFrame does fire, Motion
+     * keeps processing frames from it too.
+     *
+     * `timestamp` defaults to now. For a timeline you control, set
+     * `MotionGlobalConfig.useManualTiming = true` and pass each frame's time in
+     * milliseconds.
+     *
+     * Animations Motion hands to the browser (WAAPI), like `opacity` or
+     * `transform` on an HTML or SVG element, follow the browser's clock. With
+     * `useManualTiming` on, Motion runs those in JS instead, except for
+     * `motion/mini`, view transitions and optimized appear animations, and
+     * colours only the browser can mix, like `oklch()`, which jump to their end.
+     *
+     * Ignored when called inside a frame.
+     */
+    const processFrame = (timestamp = time.now()) => {
+        if (frameData.isProcessing)
+            return;
+        const delta = timestamp - frameData.timestamp;
+        // Clamp like the requestAnimationFrame loop, unless the timeline is ours
+        frameData.delta = MotionGlobalConfig.useManualTiming
+            ? delta
+            : Math.max(Math.min(delta, 40), 1);
+        time.set((frameData.timestamp = timestamp));
+        frameData.isProcessing = true;
+        // frameSteps' keys are in stepsOrder
+        for (const step in frameSteps) {
+            frameSteps[step].process(frameData);
+        }
+        frameData.isProcessing = false;
+    };
+
     function animateSingleValue(value, keyframes, options) {
         const motionValue$1 = isMotionValue(value) ? value : motionValue(value);
         motionValue$1.start(animateMotionValue("", motionValue$1, keyframes, options));
@@ -7503,10 +7567,9 @@
     };
 
     const defaultScaleCorrectors = {
-        borderRadius: {
-            ...correctBorderRadius,
-            applyTo: [...cornerRadiusProps],
-        },
+        borderRadius: /* @__PURE__ */ Object.assign({}, correctBorderRadius, {
+            applyTo: /* @__PURE__ */ cornerRadiusProps.slice(),
+        }),
         borderTopLeftRadius: correctBorderRadius,
         borderTopRightRadius: correctBorderRadius,
         borderBottomLeftRadius: correctBorderRadius,
@@ -7611,14 +7674,6 @@
         hasEverUpdated: false,
     };
 
-    /**
-     * Correctors registered via addScaleCorrector before projection loaded
-     * (e.g. with an async LazyMotion bundle) take precedence over the defaults.
-     */
-    Object.assign(scaleCorrectors, {
-        ...defaultScaleCorrectors,
-        ...scaleCorrectors,
-    });
     const metrics = {
         nodes: 0,
         calculatedTargetDeltas: 0,
@@ -7661,6 +7716,16 @@
         }
     }
     function createProjectionNode({ attachResizeListener, defaultParent, measureScroll, checkIsScrollRoot, resetTransform, }) {
+        /**
+         * Correctors registered via addScaleCorrector before projection loaded
+         * (e.g. with an async LazyMotion bundle) take precedence over the defaults.
+         * Applied here rather than at module scope so bundlers can drop projection
+         * when it's unused.
+         */
+        Object.assign(scaleCorrectors, {
+            ...defaultScaleCorrectors,
+            ...scaleCorrectors,
+        });
         return class ProjectionNode {
             constructor(latestValues = {}, parent = defaultParent?.()) {
                 /**
@@ -8317,7 +8382,7 @@
                 }
                 return boxWithoutScroll;
             }
-            applyTransform(box, transformOnly = false, output) {
+            applyTransform(box, transformOnly = false, output, skipOwnTransform) {
                 const withTransforms = output || createBox();
                 copyBoxInto(withTransforms, box);
                 for (let i = 0; i < this.path.length; i++) {
@@ -8333,7 +8398,7 @@
                         continue;
                     transformBox(withTransforms, node.latestValues, node.layout?.layoutBox);
                 }
-                if (hasTransform(this.latestValues)) {
+                if (!skipOwnTransform && hasTransform(this.latestValues)) {
                     transformBox(withTransforms, this.latestValues, this.layout?.layoutBox);
                 }
                 return withTransforms;
@@ -8468,7 +8533,11 @@
                 }
                 else if (this.targetDelta) {
                     if (Boolean(this.resumingFrom)) {
-                        this.applyTransform(this.layout.layoutBox, false, this.target);
+                        /**
+                         * Own transforms are applied later, in applyTransformsToTarget,
+                         * so only apply ancestor transforms here or they'd be doubled.
+                         */
+                        this.applyTransform(this.layout.layoutBox, false, this.target, true);
                     }
                     else {
                         copyBoxInto(this.target, this.layout.layoutBox);
@@ -9237,10 +9306,13 @@
      * A dragged node doesn't layout animate, so it jumps to its new layout. Shift
      * its descendants' snapshots by the same amount, so they only animate layout
      * changes relative to it, rather than lagging behind.
+     *
+     * If its drag ended since the snapshot (e.g. drag disabled from onDrag), it
+     * layout animates again, so its descendants mustn't follow its jump.
      */
     function followDraggedAncestor(node) {
         const { snapshot, dragAncestor } = node;
-        const to = dragAncestor?.layout;
+        const to = dragAncestor?.isAnimationBlocked && dragAncestor.layout;
         if (!snapshot || !to || node.resumeFrom || node.isAnimationBlocked)
             return;
         const from = dragAncestor.dragSnapshot;
@@ -9354,11 +9426,16 @@
         return () => target.removeEventListener(eventName, handler, options);
     }
 
-    const DocumentProjectionNode = createProjectionNode({
+    const DocumentProjectionNode = 
+    /* @__PURE__ */ createProjectionNode({
         attachResizeListener: (ref, notify) => addDomEvent(ref, "resize", notify),
         measureScroll: () => ({
-            x: document.documentElement.scrollLeft || document.body?.scrollLeft || 0,
-            y: document.documentElement.scrollTop || document.body?.scrollTop || 0,
+            x: document.documentElement.scrollLeft ||
+                document.body?.scrollLeft ||
+                0,
+            y: document.documentElement.scrollTop ||
+                document.body?.scrollTop ||
+                0,
         }),
         checkIsScrollRoot: () => true,
     });
@@ -9366,7 +9443,9 @@
     const rootProjectionNode = {
         current: undefined,
     };
-    const HTMLProjectionNode = createProjectionNode({
+
+    const HTMLProjectionNode = 
+    /* @__PURE__ */ createProjectionNode({
         measureScroll: (instance) => ({
             x: instance.scrollLeft,
             y: instance.scrollTop,
@@ -9410,7 +9489,7 @@
         "whileDrag",
         "exit",
     ];
-    const variantProps = ["initial", ...variantPriorityOrder];
+    const variantProps = /* @__PURE__ */ ["initial"].concat(variantPriorityOrder);
 
     function isControllingVariants(props) {
         if (isAnimationControls(props.animate))
@@ -11263,7 +11342,11 @@
                 element: this.visualElement.current,
             });
         }
-        stop(event, panInfo) {
+        /**
+         * @param dragAxes - The axes to animate on release, if not the `drag`
+         * prop's, e.g. when drag was disabled mid-gesture.
+         */
+        stop(event, panInfo, dragAxes) {
             const finalEvent = event || this.latestPointerEvent;
             const finalPanInfo = panInfo || this.latestPanInfo;
             const isDragging = this.isDragging;
@@ -11271,7 +11354,7 @@
             if (!isDragging || !finalPanInfo || !finalEvent)
                 return;
             const { velocity } = finalPanInfo;
-            this.startAnimation(velocity);
+            this.startAnimation(velocity, dragAxes);
             const { onDragEnd } = this.getProps();
             if (onDragEnd) {
                 frame.postRender(() => onDragEnd(finalEvent, finalPanInfo));
@@ -11392,11 +11475,11 @@
             }
             return measuredConstraints;
         }
-        startAnimation(velocity) {
+        startAnimation(velocity, dragAxes) {
             const { drag, dragMomentum, dragElastic, dragTransition, dragSnapToOrigin, onDragTransitionEnd, } = this.getProps();
             const constraints = this.constraints || {};
             const momentumAnimations = eachAxis((axis) => {
-                if (!shouldDrag(axis, drag, this.currentDirection)) {
+                if (!shouldDrag(axis, dragAxes || drag, this.currentDirection)) {
                     return;
                 }
                 let transition = (constraints && constraints[axis]) || {};
@@ -11599,9 +11682,15 @@
             const stopLayoutUpdateListener = projection.addEventListener("didUpdate", (({ delta, hasLayoutChanged }) => {
                 if (this.isDragging && hasLayoutChanged) {
                     eachAxis((axis) => {
-                        const motionValue = this.getAxisMotionValue(axis);
-                        if (!motionValue)
+                        /**
+                         * Only compensate axes this gesture drags. A
+                         * non-drag axis follows its layout instead, as
+                         * nothing would ever move it back (e.g. snapping
+                         * to origin only animates drag axes).
+                         */
+                        if (!shouldDrag(axis, this.getProps().drag, this.currentDirection))
                             return;
+                        const motionValue = this.getAxisMotionValue(axis);
                         this.originPoint[axis] += delta[axis].translate;
                         motionValue.set(motionValue.get() + delta[axis].translate);
                     });
@@ -14076,8 +14165,7 @@
                     const valueHasChanged = Array.isArray(next) && Array.isArray(prev)
                         ? !shallowCompare(next, prev) || variantDidChange
                         : next !== prev;
-                    if (valueHasChanged &&
-                        (next === undefined || next === null)) {
+                    if (valueHasChanged && (next === undefined || next === null)) {
                         removedKeys.add(key);
                     }
                     else if (valueHasChanged ||
@@ -14864,7 +14952,8 @@
         }
         return scopedAnimate;
     }
-    const animate = Object.assign(createScopedAnimate(), {
+    const animate = /* @__PURE__ */ Object.assign(
+    /* @__PURE__ */ createScopedAnimate(), {
         /**
          * Register an effect so `animate()` can animate the subjects it
          * claims, for instance `animate.addEffect(threeEffect)`. The most
@@ -15890,6 +15979,7 @@
     exports.positionalKeys = positionalKeys;
     exports.prefersReducedMotion = prefersReducedMotion;
     exports.press = press;
+    exports.processFrame = processFrame;
     exports.progress = progress;
     exports.progressPercentage = progressPercentage;
     exports.propEffect = propEffect;