framer-motion 12.35.0 → 12.35.2

package/dist/framer-motion.dev.js

@@ -834,8 +834,7 @@
     function parseComplexValue(v) {
         return analyseComplexValue(v).values;
     }
-    function createTransformer(source) {
-        const { split, types } = analyseComplexValue(source);
+    function buildTransformer({ split, types }) {
         const numSections = split.length;
         return (v) => {
             let output = "";
@@ -857,11 +856,34 @@
             return output;
         };
     }
+    function createTransformer(source) {
+        return buildTransformer(analyseComplexValue(source));
+    }
     const convertNumbersToZero = (v) => typeof v === "number" ? 0 : color.test(v) ? color.getAnimatableNone(v) : v;
+    /**
+     * Convert a parsed value to its zero equivalent, but preserve numbers
+     * that act as divisors in CSS calc() expressions.
+     *
+     * analyseComplexValue extracts numbers from CSS strings and puts the
+     * surrounding text into a `split` template array. For example:
+     *   "calc(var(--gap) / 5)"  →  values: [var(--gap), 5]
+     *                               split:  ["calc(", " / ", ")"]
+     *
+     * When building a zero-equivalent for animation, naively zeroing all
+     * numbers turns the divisor into 0 → "calc(var(--gap) / 0)" → NaN.
+     * We detect this by checking whether the text preceding a number
+     * (split[i]) ends with "/" — the CSS calc division operator.
+     */
+    const convertToZero = (value, splitBefore) => {
+        if (typeof value === "number") {
+            return splitBefore?.trim().endsWith("/") ? value : 0;
+        }
+        return convertNumbersToZero(value);
+    };
     function getAnimatableNone$1(v) {
-        const parsed = parseComplexValue(v);
-        const transformer = createTransformer(v);
-        return transformer(parsed.map(convertNumbersToZero));
+        const info = analyseComplexValue(v);
+        const transformer = buildTransformer(info);
+        return transformer(info.values.map((value, i) => convertToZero(value, info.split[i])));
     }
     const complex = {
         test,
@@ -1140,12 +1162,6 @@
         };
     }
 
-    const velocitySampleDuration = 5; // ms
-    function calcGeneratorVelocity(resolveValue, t, current) {
-        const prevT = Math.max(t - velocitySampleDuration, 0);
-        return velocityPerSecond(current - resolveValue(prevT), t - prevT);
-    }
-
     const springDefaults = {
         // Default spring physics
         stiffness: 100,
@@ -1171,7 +1187,20 @@
         minDamping: 0.05,
         maxDamping: 1,
     };
-
+    function calcAngularFreq(undampedFreq, dampingRatio) {
+        return undampedFreq * Math.sqrt(1 - dampingRatio * dampingRatio);
+    }
+    const rootIterations = 12;
+    function approximateRoot(envelope, derivative, initialGuess) {
+        let result = initialGuess;
+        for (let i = 1; i < rootIterations; i++) {
+            result = result - envelope(result) / derivative(result);
+        }
+        return result;
+    }
+    /**
+     * This is ported from the Framer implementation of duration-based spring resolution.
+     */
     const safeMin = 0.001;
     function findSpring({ duration = springDefaults.duration, bounce = springDefaults.bounce, velocity = springDefaults.velocity, mass = springDefaults.mass, }) {
         let envelope;
@@ -1240,18 +1269,6 @@
             };
         }
     }
-    const rootIterations = 12;
-    function approximateRoot(envelope, derivative, initialGuess) {
-        let result = initialGuess;
-        for (let i = 1; i < rootIterations; i++) {
-            result = result - envelope(result) / derivative(result);
-        }
-        return result;
-    }
-    function calcAngularFreq(undampedFreq, dampingRatio) {
-        return undampedFreq * Math.sqrt(1 - dampingRatio * dampingRatio);
-    }
-
     const durationKeys = ["duration", "bounce"];
     const physicsKeys = ["stiffness", "damping", "mass"];
     function isSpringType(options, keys) {
@@ -1339,19 +1356,37 @@
             ? springDefaults.restDelta.granular
             : springDefaults.restDelta.default);
         let resolveSpring;
+        let resolveVelocity;
+        // Underdamped coefficients, hoisted for use in the inlined next() hot path
+        let angularFreq;
+        let A;
+        let sinCoeff;
+        let cosCoeff;
         if (dampingRatio < 1) {
-            const angularFreq = calcAngularFreq(undampedAngularFreq, dampingRatio);
+            angularFreq = calcAngularFreq(undampedAngularFreq, dampingRatio);
+            A =
+                (initialVelocity +
+                    dampingRatio * undampedAngularFreq * initialDelta) /
+                    angularFreq;
             // Underdamped spring
             resolveSpring = (t) => {
                 const envelope = Math.exp(-dampingRatio * undampedAngularFreq * t);
                 return (target -
                     envelope *
-                        (((initialVelocity +
-                            dampingRatio * undampedAngularFreq * initialDelta) /
-                            angularFreq) *
-                            Math.sin(angularFreq * t) +
+                        (A * Math.sin(angularFreq * t) +
                             initialDelta * Math.cos(angularFreq * t)));
             };
+            // Analytical derivative of underdamped spring (px/ms)
+            sinCoeff =
+                dampingRatio * undampedAngularFreq * A + initialDelta * angularFreq;
+            cosCoeff =
+                dampingRatio * undampedAngularFreq * initialDelta - A * angularFreq;
+            resolveVelocity = (t) => {
+                const envelope = Math.exp(-dampingRatio * undampedAngularFreq * t);
+                return envelope *
+                    (sinCoeff * Math.sin(angularFreq * t) +
+                        cosCoeff * Math.cos(angularFreq * t));
+            };
         }
         else if (dampingRatio === 1) {
             // Critically damped spring
@@ -1359,6 +1394,10 @@
                 Math.exp(-undampedAngularFreq * t) *
                     (initialDelta +
                         (initialVelocity + undampedAngularFreq * initialDelta) * t);
+            // Analytical derivative of critically damped spring (px/ms)
+            const C = initialVelocity + undampedAngularFreq * initialDelta;
+            resolveVelocity = (t) => Math.exp(-undampedAngularFreq * t) *
+                (undampedAngularFreq * C * t - initialVelocity);
         }
         else {
             // Overdamped spring
@@ -1377,28 +1416,50 @@
                                 Math.cosh(freqForT))) /
                         dampedAngularFreq);
             };
+            // Analytical derivative of overdamped spring (px/ms)
+            const P = (initialVelocity +
+                dampingRatio * undampedAngularFreq * initialDelta) /
+                dampedAngularFreq;
+            const sinhCoeff = dampingRatio * undampedAngularFreq * P - initialDelta * dampedAngularFreq;
+            const coshCoeff = dampingRatio * undampedAngularFreq * initialDelta - P * dampedAngularFreq;
+            resolveVelocity = (t) => {
+                const envelope = Math.exp(-dampingRatio * undampedAngularFreq * t);
+                const freqForT = Math.min(dampedAngularFreq * t, 300);
+                return envelope *
+                    (sinhCoeff * Math.sinh(freqForT) +
+                        coshCoeff * Math.cosh(freqForT));
+            };
         }
         const generator = {
             calculatedDuration: isResolvedFromDuration ? duration || null : null,
+            velocity: (t) => secondsToMilliseconds(resolveVelocity(t)),
             next: (t) => {
+                /**
+                 * For underdamped physics springs we need both position and
+                 * velocity each tick. Compute shared trig values once to avoid
+                 * duplicate Math.exp/sin/cos calls on the hot path.
+                 */
+                if (!isResolvedFromDuration && dampingRatio < 1) {
+                    const envelope = Math.exp(-dampingRatio * undampedAngularFreq * t);
+                    const sin = Math.sin(angularFreq * t);
+                    const cos = Math.cos(angularFreq * t);
+                    const current = target -
+                        envelope *
+                            (A * sin + initialDelta * cos);
+                    const currentVelocity = secondsToMilliseconds(envelope *
+                        (sinCoeff * sin + cosCoeff * cos));
+                    state.done =
+                        Math.abs(currentVelocity) <= restSpeed &&
+                            Math.abs(target - current) <= restDelta;
+                    state.value = state.done ? target : current;
+                    return state;
+                }
                 const current = resolveSpring(t);
                 if (!isResolvedFromDuration) {
-                    let currentVelocity = t === 0 ? initialVelocity : 0.0;
-                    /**
-                     * We only need to calculate velocity for under-damped springs
-                     * as over- and critically-damped springs can't overshoot, so
-                     * checking only for displacement is enough.
-                     */
-                    if (dampingRatio < 1) {
-                        currentVelocity =
-                            t === 0
-                                ? secondsToMilliseconds(initialVelocity)
-                                : calcGeneratorVelocity(resolveSpring, t, current);
-                    }
-                    const isBelowVelocityThreshold = Math.abs(currentVelocity) <= restSpeed;
-                    const isBelowDisplacementThreshold = Math.abs(target - current) <= restDelta;
+                    const currentVelocity = secondsToMilliseconds(resolveVelocity(t));
                     state.done =
-                        isBelowVelocityThreshold && isBelowDisplacementThreshold;
+                        Math.abs(currentVelocity) <= restSpeed &&
+                            Math.abs(target - current) <= restDelta;
                 }
                 else {
                     state.done = t >= duration;
@@ -1423,6 +1484,12 @@
         return options;
     };
 
+    const velocitySampleDuration = 5; // ms
+    function getGeneratorVelocity(resolveValue, t, current) {
+        const prevT = Math.max(t - velocitySampleDuration, 0);
+        return velocityPerSecond(current - resolveValue(prevT), t - prevT);
+    }
+
     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];
         const state = {
@@ -1468,7 +1535,7 @@
             timeReachedBoundary = t;
             spring$1 = spring({
                 keyframes: [state.value, nearestBoundary(state.value)],
-                velocity: calcGeneratorVelocity(calcLatest, t, state.value), // TODO: This should be passing * 1000
+                velocity: getGeneratorVelocity(calcLatest, t, state.value), // TODO: This should be passing * 1000
                 damping: bounceDamping,
                 stiffness: bounceStiffness,
                 restDelta,
@@ -1868,7 +1935,7 @@
             const state = isInDelayPhase
                 ? { done: false, value: keyframes[0] }
                 : frameGenerator.next(elapsed);
-            if (mixKeyframes) {
+            if (mixKeyframes && !isInDelayPhase) {
                 state.value = mixKeyframes(state.value);
             }
             let { done } = state;
@@ -1921,16 +1988,42 @@
             else if (this.driver) {
                 this.startTime = this.driver.now() - newTime / this.playbackSpeed;
             }
-            this.driver?.start(false);
+            if (this.driver) {
+                this.driver.start(false);
+            }
+            else {
+                this.startTime = 0;
+                this.state = "paused";
+                this.holdTime = newTime;
+                this.tick(newTime);
+            }
+        }
+        /**
+         * Returns the generator's velocity at the current time in units/second.
+         * Uses the analytical derivative when available (springs), avoiding
+         * the MotionValue's frame-dependent velocity estimation.
+         */
+        getGeneratorVelocity() {
+            const t = this.currentTime;
+            if (t <= 0)
+                return this.options.velocity || 0;
+            if (this.generator.velocity) {
+                return this.generator.velocity(t);
+            }
+            // Fallback: finite difference
+            const current = this.generator.next(t).value;
+            return getGeneratorVelocity((s) => this.generator.next(s).value, t, current);
         }
         get speed() {
             return this.playbackSpeed;
         }
         set speed(newSpeed) {
-            this.updateTime(time.now());
             const hasChanged = this.playbackSpeed !== newSpeed;
+            if (hasChanged && this.driver) {
+                this.updateTime(time.now());
+            }
             this.playbackSpeed = newSpeed;
-            if (hasChanged) {
+            if (hasChanged && this.driver) {
                 this.time = millisecondsToSeconds(this.currentTime);
             }
         }
@@ -2540,9 +2633,13 @@
             return millisecondsToSeconds(Number(this.animation.currentTime) || 0);
         }
         set time(newTime) {
+            const wasFinished = this.finishedTime !== null;
             this.manualStartTime = null;
             this.finishedTime = null;
             this.animation.currentTime = secondsToMilliseconds(newTime);
+            if (wasFinished) {
+                this.animation.pause();
+            }
         }
         /**
          * The playback speed of the animation.
@@ -2632,7 +2729,12 @@
              */
             replaceTransitionType(options);
             super(options);
-            if (options.startTime !== undefined) {
+            /**
+             * Only set startTime when the animation should autoplay.
+             * Setting startTime on a paused WAAPI animation unpauses it
+             * (per the WAAPI spec), which breaks autoplay: false.
+             */
+            if (options.startTime !== undefined && options.autoplay !== false) {
                 this.startTime = options.startTime;
             }
             this.options = options;
@@ -2664,7 +2766,16 @@
              */
             const sampleTime = Math.max(sampleDelta, time.now() - this.startTime);
             const delta = clamp(0, sampleDelta, sampleTime - sampleDelta);
-            motionValue.setWithVelocity(sampleAnimation.sample(Math.max(0, sampleTime - delta)).value, sampleAnimation.sample(sampleTime).value, delta);
+            const current = sampleAnimation.sample(sampleTime).value;
+            /**
+             * Write the estimated value to inline style so it persists
+             * after cancel(), covering the async gap before the next
+             * animation starts.
+             */
+            const { name } = this.options;
+            if (element && name)
+                setStyle(element, name, current);
+            motionValue.setWithVelocity(sampleAnimation.sample(Math.max(0, sampleTime - delta)).value, current, delta);
             sampleAnimation.stop();
         }
     }
@@ -4405,19 +4516,14 @@
         get(name) {
             return this.values.get(name)?.value;
         }
-        destroy() {
-            for (const value of this.values.values()) {
-                value.onRemove();
-            }
-        }
     }
 
     function createEffect(addValue) {
         const stateCache = new WeakMap();
-        const subscriptions = [];
         return (subject, values) => {
             const state = stateCache.get(subject) ?? new MotionValueState();
             stateCache.set(subject, state);
+            const subscriptions = [];
             for (const key in values) {
                 const value = values[key];
                 const remove = addValue(subject, state, key, value);
@@ -4509,8 +4615,7 @@
             if (!valueIsDefault) {
                 transformIsDefault = false;
                 const transformName = translateAlias$1[key] || key;
-                const valueToRender = state.latest[key];
-                transform += `${transformName}(${valueToRender}) `;
+                transform += `${transformName}(${value}) `;
             }
         }
         return transformIsDefault ? "none" : transform.trim();
@@ -5218,16 +5323,23 @@
             }
         };
         const startAnimation = () => {
-            stopAnimation();
             const currentValue = asNumber$1(value.get());
             const targetValue = asNumber$1(latestValue);
             // Don't animate if we're already at the target
             if (currentValue === targetValue) {
+                stopAnimation();
                 return;
             }
+            // Use the running animation's analytical velocity for accuracy,
+            // falling back to the MotionValue's velocity for the initial animation.
+            // This prevents systematic velocity loss at high frame rates (240hz+).
+            const velocity = activeAnimation
+                ? activeAnimation.getGeneratorVelocity()
+                : value.getVelocity();
+            stopAnimation();
             activeAnimation = new JSAnimation({
                 keyframes: [currentValue, targetValue],
-                velocity: value.getVelocity(),
+                velocity,
                 // Default to spring if no type specified (matches useSpring behavior)
                 type: "spring",
                 restDelta: 0.001,
@@ -5236,16 +5348,19 @@
                 onUpdate: latestSetter,
             });
         };
+        // Use a stable function reference so the frame loop Set deduplicates
+        // multiple calls within the same frame (e.g. rapid mouse events)
+        const scheduleAnimation = () => {
+            startAnimation();
+            value["events"].animationStart?.notify();
+            activeAnimation?.then(() => {
+                value["events"].animationComplete?.notify();
+            });
+        };
         value.attach((v, set) => {
             latestValue = v;
             latestSetter = (latest) => set(parseValue(latest, unit));
-            frame.postRender(() => {
-                startAnimation();
-                value["events"].animationStart?.notify();
-                activeAnimation?.then(() => {
-                    value["events"].animationComplete?.notify();
-                });
-            });
+            frame.postRender(scheduleAnimation);
         }, stopAnimation);
         if (isMotionValue(source)) {
             const removeSourceOnChange = source.on("change", (v) => value.set(parseValue(v, unit)));
@@ -6541,7 +6656,7 @@
                 applyBoxDelta(box, delta);
             }
             if (isSharedTransition && hasTransform(node.latestValues)) {
-                transformBox(box, node.latestValues);
+                transformBox(box, node.latestValues, node.layout?.layoutBox);
             }
         }
         /**
@@ -6580,9 +6695,10 @@
     /**
      * Apply a transform to a box from the latest resolved motion values.
      */
-    function transformBox(box, transform) {
-        transformAxis(box.x, resolveAxisTranslate(transform.x, box.x), transform.scaleX, transform.scale, transform.originX);
-        transformAxis(box.y, resolveAxisTranslate(transform.y, box.y), transform.scaleY, transform.scale, transform.originY);
+    function transformBox(box, transform, sourceBox) {
+        const resolveBox = sourceBox ?? box;
+        transformAxis(box.x, resolveAxisTranslate(transform.x, resolveBox.x), transform.scaleX, transform.scale, transform.originX);
+        transformAxis(box.y, resolveAxisTranslate(transform.y, resolveBox.y), transform.scaleY, transform.scale, transform.originY);
     }
 
     function measureViewportBox(instance, transformPoint) {
@@ -8338,6 +8454,14 @@
                 for (let i = 0; i < this.path.length; i++) {
                     const node = this.path[i];
                     node.shouldResetTransform = true;
+                    /**
+                     * Percentage translates resolve against layoutBox dimensions,
+                     * so ancestors with them must be re-measured after transform reset.
+                     */
+                    if (typeof node.latestValues.x === "string" ||
+                        typeof node.latestValues.y === "string") {
+                        node.isLayoutDirty = true;
+                    }
                     node.updateScroll("snapshot");
                     if (node.options.layoutRoot) {
                         node.willUpdate(false);
@@ -8603,10 +8727,10 @@
                     }
                     if (!hasTransform(node.latestValues))
                         continue;
-                    transformBox(withTransforms, node.latestValues);
+                    transformBox(withTransforms, node.latestValues, node.layout?.layoutBox);
                 }
                 if (hasTransform(this.latestValues)) {
-                    transformBox(withTransforms, this.latestValues);
+                    transformBox(withTransforms, this.latestValues, this.layout?.layoutBox);
                 }
                 return withTransforms;
             }
@@ -8615,15 +8739,15 @@
                 copyBoxInto(boxWithoutTransform, box);
                 for (let i = 0; i < this.path.length; i++) {
                     const node = this.path[i];
-                    if (!node.instance)
-                        continue;
                     if (!hasTransform(node.latestValues))
                         continue;
-                    hasScale(node.latestValues) && node.updateSnapshot();
-                    const sourceBox = createBox();
-                    const nodeBox = node.measurePageBox();
-                    copyBoxInto(sourceBox, nodeBox);
-                    removeBoxTransforms(boxWithoutTransform, node.latestValues, node.snapshot ? node.snapshot.layoutBox : undefined, sourceBox);
+                    let sourceBox;
+                    if (node.instance) {
+                        hasScale(node.latestValues) && node.updateSnapshot();
+                        sourceBox = createBox();
+                        copyBoxInto(sourceBox, node.measurePageBox());
+                    }
+                    removeBoxTransforms(boxWithoutTransform, node.latestValues, node.snapshot?.layoutBox, sourceBox);
                 }
                 if (hasTransform(this.latestValues)) {
                     removeBoxTransforms(boxWithoutTransform, this.latestValues);
@@ -9944,7 +10068,7 @@
     class PopChildMeasure extends React__namespace.Component {
         getSnapshotBeforeUpdate(prevProps) {
             const element = this.props.childRef.current;
-            if (element && prevProps.isPresent && !this.props.isPresent && this.props.pop !== false) {
+            if (isHTMLElement(element) && prevProps.isPresent && !this.props.isPresent && this.props.pop !== false) {
                 const parent = element.offsetParent;
                 const parentWidth = isHTMLElement(parent)
                     ? parent.offsetWidth || 0
@@ -9952,9 +10076,10 @@
                 const parentHeight = isHTMLElement(parent)
                     ? parent.offsetHeight || 0
                     : 0;
+                const computedStyle = getComputedStyle(element);
                 const size = this.props.sizeRef.current;
-                size.height = element.offsetHeight || 0;
-                size.width = element.offsetWidth || 0;
+                size.height = parseFloat(computedStyle.height);
+                size.width = parseFloat(computedStyle.width);
                 size.top = element.offsetTop;
                 size.left = element.offsetLeft;
                 size.right = parentWidth - size.width - size.left;
@@ -11356,9 +11481,7 @@
             },
         };
     }
-    const addPointerInfo = (handler) => {
-        return (event) => isPrimaryPointer(event) && handler(event, extractEventInfo(event));
-    };
+    const addPointerInfo = (handler) => (event) => isPrimaryPointer(event) && handler(event, extractEventInfo(event));
 
     function addPointerEvent(target, eventName, handler, options) {
         return addDomEvent(target, eventName, addPointerInfo(handler), options);
@@ -11395,6 +11518,12 @@
              * @internal
              */
             this.lastMoveEventInfo = null;
+            /**
+             * Raw (untransformed) event info, re-transformed each frame
+             * so transformPagePoint sees the current parent matrix.
+             * @internal
+             */
+            this.lastRawMoveEventInfo = null;
             /**
              * @internal
              */
@@ -11422,6 +11551,11 @@
             this.updatePoint = () => {
                 if (!(this.lastMoveEvent && this.lastMoveEventInfo))
                     return;
+                // Re-transform raw point through current transformPagePoint so
+                // animated parent transforms (e.g. rotation) are picked up each frame
+                if (this.lastRawMoveEventInfo) {
+                    this.lastMoveEventInfo = transformPoint(this.lastRawMoveEventInfo, this.transformPagePoint);
+                }
                 const info = getPanInfo(this.lastMoveEventInfo, this.history);
                 const isPanStarted = this.startEvent !== null;
                 // Only start panning if the offset is larger than 3 pixels. If we make it
@@ -11442,6 +11576,7 @@
             };
             this.handlePointerMove = (event, info) => {
                 this.lastMoveEvent = event;
+                this.lastRawMoveEventInfo = info;
                 this.lastMoveEventInfo = transformPoint(info, this.transformPagePoint);
                 // Throttle mouse move event to once per frame
                 frame.update(this.updatePoint, true);
@@ -13814,7 +13949,7 @@
         const { length, position } = keys[axisName];
         const prev = axis.current;
         const prevTime = info.time;
-        axis.current = element[`scroll${position}`];
+        axis.current = Math.abs(element[`scroll${position}`]);
         axis.scrollLength = element[`scroll${length}`] - element[`client${length}`];
         axis.offset.length = 0;
         axis.offset[0] = 0;
@@ -15191,6 +15326,76 @@
         };
     }
 
+    /**
+     * Creates a `transformPagePoint` function that corrects pointer coordinates
+     * for a parent container with CSS transforms (rotation, scale, skew).
+     *
+     * When dragging elements inside a transformed parent, pointer coordinates
+     * need to be transformed through the inverse of the parent's transform
+     * so the drag offset is in local space.
+     *
+     * Works with both static and continuously animating transforms.
+     *
+     * @example
+     * ```jsx
+     * function App() {
+     *   const ref = useRef(null)
+     *
+     *   return (
+     *     <motion.div ref={ref} style={{ rotate: 90 }}>
+     *       <MotionConfig transformPagePoint={correctParentTransform(ref)}>
+     *         <motion.div drag />
+     *       </MotionConfig>
+     *     </motion.div>
+     *   )
+     * }
+     * ```
+     *
+     * @param parentRef - A React ref to the transformed parent element
+     * @returns A transformPagePoint function for use with MotionConfig
+     *
+     * @public
+     */
+    function correctParentTransform(parentRef) {
+        return (point) => {
+            const parent = parentRef.current;
+            if (!parent)
+                return point;
+            const inv = getInverseMatrix(parent);
+            if (!inv)
+                return point;
+            // Get center of rotation in page space
+            const rect = parent.getBoundingClientRect();
+            const cx = rect.left + window.scrollX + rect.width / 2;
+            const cy = rect.top + window.scrollY + rect.height / 2;
+            // Transform (point - center) through inverse, then add center back
+            const dx = point.x - cx;
+            const dy = point.y - cy;
+            return {
+                x: cx + inv.a * dx + inv.c * dy,
+                y: cy + inv.b * dx + inv.d * dy,
+            };
+        };
+    }
+    function getInverseMatrix(element) {
+        const { transform } = getComputedStyle(element);
+        if (!transform || transform === "none")
+            return null;
+        const match = transform.match(/^matrix3d\((.*)\)$/u) ||
+            transform.match(/^matrix\((.*)\)$/u);
+        if (!match)
+            return null;
+        const v = match[1].split(",").map(Number);
+        const is3d = transform.startsWith("matrix3d");
+        const a = v[0], b = v[1];
+        const c = is3d ? v[4] : v[2];
+        const d = is3d ? v[5] : v[3];
+        const det = a * d - b * c;
+        if (Math.abs(det) < 1e-10)
+            return null;
+        return { a: d / det, b: -b / det, c: -c / det, d: a / det };
+    }
+
     const appearAnimationStore = new Map();
     const appearComplete = new Map();
 
@@ -15625,6 +15830,7 @@
     exports.copyBoxInto = copyBoxInto;
     exports.correctBorderRadius = correctBorderRadius;
     exports.correctBoxShadow = correctBoxShadow;
+    exports.correctParentTransform = correctParentTransform;
     exports.createAnimationState = createAnimationState;
     exports.createAxis = createAxis;
     exports.createAxisDelta = createAxisDelta;