motion 12.7.3 → 12.7.5-alpha.0

package/dist/es/framer-motion/dist/es/animation/animate/sequence.mjs

@@ -1,6 +1,6 @@
-import { spring } from '../generators/spring/index.mjs';
 import { createAnimationsFromSequence } from '../sequence/create.mjs';
 import { animateSubject } from './subject.mjs';
+import { spring } from '../../../../../motion-dom/dist/es/animation/generators/spring/index.mjs';
 
 function animateSequence(sequence, options, scope) {
     const animations = [];

package/dist/es/framer-motion/dist/es/animation/animators/waapi/animate-elements.mjs

@@ -1,6 +1,10 @@
 import { resolveElements } from '../../../../../../motion-dom/dist/es/utils/resolve-elements.mjs';
 import { invariant } from '../../../../../../motion-utils/dist/es/errors.mjs';
 import { getValueTransition } from '../../../../../../motion-dom/dist/es/animation/utils/get-value-transition.mjs';
+import { getAnimationMap, animationMapKey } from '../../../../../../motion-dom/dist/es/animation/utils/active-animations.mjs';
+import { getComputedStyle } from '../../../../../../motion-dom/dist/es/render/dom/style-computed.mjs';
+import { fillWildcards } from '../../../../../../motion-dom/dist/es/animation/keyframes/utils/fill-wildcards.mjs';
+import { applyPxDefaults } from '../../../../../../motion-dom/dist/es/animation/keyframes/utils/apply-px-defaults.mjs';
 import { NativeAnimation } from '../../../../../../motion-dom/dist/es/animation/NativeAnimation.mjs';
 import { secondsToMilliseconds } from '../../../../../../motion-utils/dist/es/time-conversion.mjs';
 
@@ -8,7 +12,27 @@ function animateElements(elementOrSelector, keyframes, options, scope) {
     const elements = resolveElements(elementOrSelector, scope);
     const numElements = elements.length;
     invariant(Boolean(numElements), "No valid element provided.");
-    const animations = [];
+    /**
+     * WAAPI doesn't support interrupting animations.
+     *
+     * Therefore, starting animations requires a three-step process:
+     * 1. Stop existing animations (write styles to DOM)
+     * 2. Resolve keyframes (read styles from DOM)
+     * 3. Create new animations (write styles to DOM)
+     *
+     * The hybrid `animate()` function uses AsyncAnimation to resolve
+     * keyframes before creating new animations, which removes style
+     * thrashing. Here, we have much stricter filesize constraints.
+     * Therefore we do this in a synchronous way that ensures that
+     * at least within `animate()` calls there is no style thrashing.
+     *
+     * In the motion-native-animate-mini-interrupt benchmark this
+     * was 80% faster than a single loop.
+     */
+    const animationDefinitions = [];
+    /**
+     * Step 1: Build options and stop existing animations (write)
+     */
     for (let i = 0; i < numElements; i++) {
         const element = elements[i];
         const elementTransition = { ...options };
@@ -19,20 +43,68 @@ function animateElements(elementOrSelector, keyframes, options, scope) {
             elementTransition.delay = elementTransition.delay(i, numElements);
         }
         for (const valueName in keyframes) {
-            const valueKeyframes = keyframes[valueName];
+            let valueKeyframes = keyframes[valueName];
+            if (!Array.isArray(valueKeyframes)) {
+                valueKeyframes = [valueKeyframes];
+            }
             const valueOptions = {
                 ...getValueTransition(elementTransition, valueName),
             };
             valueOptions.duration && (valueOptions.duration = secondsToMilliseconds(valueOptions.duration));
             valueOptions.delay && (valueOptions.delay = secondsToMilliseconds(valueOptions.delay));
-            animations.push(new NativeAnimation({
-                element,
-                name: valueName,
-                keyframes: valueKeyframes,
-                transition: valueOptions,
-                allowFlatten: !elementTransition.type && !elementTransition.ease,
-            }));
+            /**
+             * If there's an existing animation playing on this element then stop it
+             * before creating a new one.
+             */
+            const map = getAnimationMap(element);
+            const key = animationMapKey(valueName, valueOptions.pseudoElement || "");
+            const currentAnimation = map.get(key);
+            currentAnimation && currentAnimation.stop();
+            animationDefinitions.push({
+                map,
+                key,
+                unresolvedKeyframes: valueKeyframes,
+                options: {
+                    ...valueOptions,
+                    element,
+                    name: valueName,
+                    allowFlatten: !elementTransition.type && !elementTransition.ease,
+                },
+            });
+        }
+    }
+    /**
+     * Step 2: Resolve keyframes (read)
+     */
+    for (let i = 0; i < animationDefinitions.length; i++) {
+        const { unresolvedKeyframes, options: animationOptions } = animationDefinitions[i];
+        const { element, name, pseudoElement } = animationOptions;
+        if (!pseudoElement && unresolvedKeyframes[0] === null) {
+            unresolvedKeyframes[0] = getComputedStyle(element, name);
+        }
+        fillWildcards(unresolvedKeyframes);
+        applyPxDefaults(unresolvedKeyframes, name);
+        /**
+         * If we only have one keyframe, explicitly read the initial keyframe
+         * from the computed style. This is to ensure consistency with WAAPI behaviour
+         * for restarting animations, for instance .play() after finish, when it
+         * has one vs two keyframes.
+         */
+        if (!pseudoElement && unresolvedKeyframes.length < 2) {
+            unresolvedKeyframes.unshift(getComputedStyle(element, name));
         }
+        animationOptions.keyframes = unresolvedKeyframes;
+    }
+    /**
+     * Step 3: Create new animations (write)
+     */
+    const animations = [];
+    for (let i = 0; i < animationDefinitions.length; i++) {
+        const { map, key, options: animationOptions } = animationDefinitions[i];
+        const animation = new NativeAnimation(animationOptions);
+        map.set(key, animation);
+        animation.finished.finally(() => map.delete(key));
+        animations.push(animation);
     }
     return animations;
 }

package/dist/es/framer-motion/dist/es/animation/interfaces/motion-value.mjs

@@ -1,6 +1,3 @@
-import { instantAnimationState } from '../../utils/use-instant-transition-state.mjs';
-import { AcceleratedAnimation } from '../animators/AcceleratedAnimation.mjs';
-import { MainThreadAnimation } from '../animators/MainThreadAnimation.mjs';
 import { getFinalKeyframe } from '../animators/waapi/utils/get-final-keyframe.mjs';
 import { getDefaultTransition } from '../utils/default-transitions.mjs';
 import { isTransitionDefined } from '../utils/is-transition-defined.mjs';
@@ -8,7 +5,7 @@ import { getValueTransition } from '../../../../../motion-dom/dist/es/animation/
 import { secondsToMilliseconds } from '../../../../../motion-utils/dist/es/time-conversion.mjs';
 import { MotionGlobalConfig } from '../../../../../motion-utils/dist/es/global-config.mjs';
 import { frame } from '../../../../../motion-dom/dist/es/frameloop/frame.mjs';
-import { GroupAnimationWithThen } from '../../../../../motion-dom/dist/es/animation/GroupAnimationWithThen.mjs';
+import { AsyncMotionValueAnimation } from '../../../../../motion-dom/dist/es/animation/AsyncMotionValueAnimation.mjs';
 
 const animateMotionValue = (name, value, target, transition = {}, element, isHandoff) => (onComplete) => {
     const valueTransition = getValueTransition(transition, name) || {};
@@ -24,7 +21,7 @@ const animateMotionValue = (name, value, target, transition = {}, element, isHan
      */
     let { elapsed = 0 } = transition;
     elapsed = elapsed - secondsToMilliseconds(delay);
-    let options = {
+    const options = {
         keyframes: Array.isArray(target) ? target : [null, target],
         ease: "easeOut",
         velocity: value.getVelocity(),
@@ -47,22 +44,18 @@ const animateMotionValue = (name, value, target, transition = {}, element, isHan
      * unique transition settings for this value.
      */
     if (!isTransitionDefined(valueTransition)) {
-        options = {
-            ...options,
-            ...getDefaultTransition(name, options),
-        };
+        Object.assign(options, getDefaultTransition(name, options));
     }
     /**
      * Both WAAPI and our internal animation functions use durations
      * as defined by milliseconds, while our external API defines them
      * as seconds.
      */
-    if (options.duration) {
-        options.duration = secondsToMilliseconds(options.duration);
-    }
-    if (options.repeatDelay) {
-        options.repeatDelay = secondsToMilliseconds(options.repeatDelay);
-    }
+    options.duration && (options.duration = secondsToMilliseconds(options.duration));
+    options.repeatDelay && (options.repeatDelay = secondsToMilliseconds(options.repeatDelay));
+    /**
+     * Support deprecated way to set initial value. Prefer keyframe syntax.
+     */
     if (options.from !== undefined) {
         options.keyframes[0] = options.from;
     }
@@ -74,7 +67,7 @@ const animateMotionValue = (name, value, target, transition = {}, element, isHan
             shouldSkip = true;
         }
     }
-    if (instantAnimationState.current ||
+    if (MotionGlobalConfig.instantAnimations ||
         MotionGlobalConfig.skipAnimations) {
         shouldSkip = true;
         options.duration = 0;
@@ -97,22 +90,10 @@ const animateMotionValue = (name, value, target, transition = {}, element, isHan
                 options.onUpdate(finalKeyframe);
                 options.onComplete();
             });
-            // We still want to return some animation controls here rather
-            // than returning undefined
-            return new GroupAnimationWithThen([]);
+            return;
         }
     }
-    /**
-     * Animate via WAAPI if possible. If this is a handoff animation, the optimised animation will be running via
-     * WAAPI. Therefore, this animation must be JS to ensure it runs "under" the
-     * optimised animation.
-     */
-    if (!isHandoff && AcceleratedAnimation.supports(options)) {
-        return new AcceleratedAnimation(options);
-    }
-    else {
-        return new MainThreadAnimation(options);
-    }
+    return new AsyncMotionValueAnimation(options);
 };
 
 export { animateMotionValue };

package/dist/es/framer-motion/dist/es/animation/interfaces/visual-element-target.mjs

@@ -1,10 +1,10 @@
-import { positionalKeys } from '../../render/html/utils/keys-position.mjs';
 import { setTarget } from '../../render/utils/setters.mjs';
 import { addValueToWillChange } from '../../value/use-will-change/add-will-change.mjs';
 import { getOptimisedAppearId } from '../optimized-appear/get-appear-id.mjs';
 import { animateMotionValue } from './motion-value.mjs';
 import { getValueTransition } from '../../../../../motion-dom/dist/es/animation/utils/get-value-transition.mjs';
 import { frame } from '../../../../../motion-dom/dist/es/frameloop/frame.mjs';
+import { positionalKeys } from '../../../../../motion-dom/dist/es/render/utils/keys-position.mjs';
 
 /**
  * Decide whether we should block this animation. Previously, we achieved this

package/dist/es/framer-motion/dist/es/animation/optimized-appear/store-id.mjs

@@ -1,4 +1,4 @@
-import { transformProps } from '../../render/html/utils/keys-transform.mjs';
+import { transformProps } from '../../../../../motion-dom/dist/es/render/utils/keys-transform.mjs';
 
 const appearStoreId = (elementId, valueName) => {
     const key = transformProps.has(valueName) ? "transform" : valueName;

package/dist/es/framer-motion/dist/es/animation/sequence/create.mjs

@@ -1,6 +1,3 @@
-import { getEasingForSegment } from '../../easing/utils/get-easing-for-segment.mjs';
-import { defaultOffset } from '../../utils/offsets/default.mjs';
-import { fillOffset } from '../../utils/offsets/fill.mjs';
 import { isMotionValue } from '../../value/utils/is-motion-value.mjs';
 import { resolveSubjects } from '../animate/resolve-subjects.mjs';
 import { calculateRepeatDuration } from './utils/calc-repeat-duration.mjs';
@@ -8,9 +5,12 @@ import { calcNextTime } from './utils/calc-time.mjs';
 import { addKeyframes } from './utils/edit.mjs';
 import { normalizeTimes } from './utils/normalize-times.mjs';
 import { compareByTime } from './utils/sort.mjs';
+import { defaultOffset } from '../../../../../motion-dom/dist/es/animation/keyframes/offsets/default.mjs';
 import { isGenerator } from '../../../../../motion-dom/dist/es/animation/generators/utils/is-generator.mjs';
 import { createGeneratorEasing } from '../../../../../motion-dom/dist/es/animation/generators/utils/create-generator-easing.mjs';
+import { fillOffset } from '../../../../../motion-dom/dist/es/animation/keyframes/offsets/fill.mjs';
 import { invariant } from '../../../../../motion-utils/dist/es/errors.mjs';
+import { getEasingForSegment } from '../../../../../motion-utils/dist/es/easing/utils/get-easing-for-segment.mjs';
 import { progress } from '../../../../../motion-utils/dist/es/progress.mjs';
 import { secondsToMilliseconds } from '../../../../../motion-utils/dist/es/time-conversion.mjs';
 

package/dist/es/framer-motion/dist/es/animation/sequence/utils/edit.mjs

@@ -1,5 +1,5 @@
-import { getEasingForSegment } from '../../../easing/utils/get-easing-for-segment.mjs';
-import { mixNumber } from '../../../utils/mix/number.mjs';
+import { mixNumber } from '../../../../../../motion-dom/dist/es/utils/mix/number.mjs';
+import { getEasingForSegment } from '../../../../../../motion-utils/dist/es/easing/utils/get-easing-for-segment.mjs';
 import { removeItem } from '../../../../../../motion-utils/dist/es/array.mjs';
 
 function eraseKeyframes(sequence, startTime, endTime) {

package/dist/es/framer-motion/dist/es/animation/utils/default-transitions.mjs

@@ -1,4 +1,4 @@
-import { transformProps } from '../../render/html/utils/keys-transform.mjs';
+import { transformProps } from '../../../../../motion-dom/dist/es/render/utils/keys-transform.mjs';
 
 const underDampedSpring = {
     type: "spring",

package/dist/es/framer-motion/dist/es/animation/utils/stagger.mjs

@@ -1,4 +1,4 @@
-import { easingDefinitionToFunction } from '../../easing/utils/map.mjs';
+import { easingDefinitionToFunction } from '../../../../../motion-utils/dist/es/easing/utils/map.mjs';
 
 function getOriginIndex(from, total) {
     if (from === "first") {

package/dist/es/framer-motion/dist/es/components/AnimatePresence/PresenceChild.mjs

@@ -1,7 +1,7 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import * as React from 'react';
-import { useId, useCallback, useMemo } from 'react';
+import { useId, useMemo } from 'react';
 import { PresenceContext } from '../../context/PresenceContext.mjs';
 import { useConstant } from '../../utils/use-constant.mjs';
 import { PopChild } from './PopChild.mjs';
@@ -9,33 +9,36 @@ import { PopChild } from './PopChild.mjs';
 const PresenceChild = ({ children, initial, isPresent, onExitComplete, custom, presenceAffectsLayout, mode, anchorX, }) => {
     const presenceChildren = useConstant(newChildrenMap);
     const id = useId();
-    const memoizedOnExitComplete = useCallback((childId) => {
-        presenceChildren.set(childId, true);
-        for (const isComplete of presenceChildren.values()) {
-            if (!isComplete)
-                return; // can stop searching when any is incomplete
-        }
-        onExitComplete && onExitComplete();
-    }, [presenceChildren, onExitComplete]);
-    const context = useMemo(() => ({
-        id,
-        initial,
-        isPresent,
-        custom,
-        onExitComplete: memoizedOnExitComplete,
-        register: (childId) => {
-            presenceChildren.set(childId, false);
-            return () => presenceChildren.delete(childId);
-        },
-    }), 
+    let isReusedContext = true;
+    let context = useMemo(() => {
+        isReusedContext = false;
+        return {
+            id,
+            initial,
+            isPresent,
+            custom,
+            onExitComplete: (childId) => {
+                presenceChildren.set(childId, true);
+                for (const isComplete of presenceChildren.values()) {
+                    if (!isComplete)
+                        return; // can stop searching when any is incomplete
+                }
+                onExitComplete && onExitComplete();
+            },
+            register: (childId) => {
+                presenceChildren.set(childId, false);
+                return () => presenceChildren.delete(childId);
+            },
+        };
+    }, [isPresent, presenceChildren, onExitComplete]);
     /**
      * If the presence of a child affects the layout of the components around it,
      * we want to make a new context value to ensure they get re-rendered
      * so they can detect that layout change.
      */
-    presenceAffectsLayout
-        ? [Math.random(), memoizedOnExitComplete]
-        : [isPresent, memoizedOnExitComplete]);
+    if (presenceAffectsLayout && isReusedContext) {
+        context = { ...context };
+    }
     useMemo(() => {
         presenceChildren.forEach((_, key) => presenceChildren.set(key, false));
     }, [isPresent]);

package/dist/es/framer-motion/dist/es/components/Reorder/utils/check-reorder.mjs

@@ -1,4 +1,4 @@
-import { mixNumber } from '../../../utils/mix/number.mjs';
+import { mixNumber } from '../../../../../../motion-dom/dist/es/utils/mix/number.mjs';
 import { moveItem } from '../../../../../../motion-utils/dist/es/array.mjs';
 
 function checkReorder(order, value, offset, velocity) {

package/dist/es/framer-motion/dist/es/gestures/drag/VisualElementDragControls.mjs

@@ -9,14 +9,14 @@ import { eachAxis } from '../../projection/utils/each-axis.mjs';
 import { measurePageBox } from '../../projection/utils/measure.mjs';
 import { getContextWindow } from '../../utils/get-context-window.mjs';
 import { isRefObject } from '../../utils/is-ref-object.mjs';
-import { mixNumber } from '../../utils/mix/number.mjs';
-import { percent } from '../../value/types/numbers/units.mjs';
 import { addValueToWillChange } from '../../value/use-will-change/add-will-change.mjs';
 import { PanSession } from '../pan/PanSession.mjs';
 import { applyConstraints, calcRelativeConstraints, resolveDragElastic, calcViewportConstraints, rebaseAxisConstraints, calcOrigin, defaultElastic } from './utils/constraints.mjs';
 import { frame } from '../../../../../motion-dom/dist/es/frameloop/frame.mjs';
 import { invariant } from '../../../../../motion-utils/dist/es/errors.mjs';
 import { setDragLock } from '../../../../../motion-dom/dist/es/gestures/drag/state/set-active.mjs';
+import { percent } from '../../../../../motion-dom/dist/es/value/types/numbers/units.mjs';
+import { mixNumber } from '../../../../../motion-dom/dist/es/utils/mix/number.mjs';
 
 const elementDragControls = new WeakMap();
 /**

package/dist/es/framer-motion/dist/es/gestures/drag/utils/constraints.mjs

@@ -1,7 +1,7 @@
 import { calcLength } from '../../../projection/geometry/delta-calc.mjs';
-import { clamp } from '../../../utils/clamp.mjs';
-import { mixNumber } from '../../../utils/mix/number.mjs';
+import { mixNumber } from '../../../../../../motion-dom/dist/es/utils/mix/number.mjs';
 import { progress } from '../../../../../../motion-utils/dist/es/progress.mjs';
+import { clamp } from '../../../../../../motion-utils/dist/es/clamp.mjs';
 
 /**
  * Apply constraints to a point. These constraints are both physical along an

package/dist/es/framer-motion/dist/es/gestures/focus.mjs

@@ -1,6 +1,6 @@
 import { addDomEvent } from '../events/add-dom-event.mjs';
 import { Feature } from '../motion/features/Feature.mjs';
-import { pipe } from '../utils/pipe.mjs';
+import { pipe } from '../../../../motion-utils/dist/es/pipe.mjs';
 
 class FocusGesture extends Feature {
     constructor() {

package/dist/es/framer-motion/dist/es/gestures/pan/PanSession.mjs

@@ -1,9 +1,9 @@
 import { addPointerEvent } from '../../events/add-pointer-event.mjs';
 import { extractEventInfo } from '../../events/event-info.mjs';
 import { distance2D } from '../../utils/distance.mjs';
-import { pipe } from '../../utils/pipe.mjs';
 import { frame, cancelFrame, frameData } from '../../../../../motion-dom/dist/es/frameloop/frame.mjs';
 import { isPrimaryPointer } from '../../../../../motion-dom/dist/es/gestures/utils/is-primary-pointer.mjs';
+import { pipe } from '../../../../../motion-utils/dist/es/pipe.mjs';
 import { secondsToMilliseconds, millisecondsToSeconds } from '../../../../../motion-utils/dist/es/time-conversion.mjs';
 
 /**

package/dist/es/framer-motion/dist/es/motion/utils/is-forced-motion-value.mjs

@@ -1,5 +1,5 @@
 import { scaleCorrectors } from '../../projection/styles/scale-correction.mjs';
-import { transformProps } from '../../render/html/utils/keys-transform.mjs';
+import { transformProps } from '../../../../../motion-dom/dist/es/render/utils/keys-transform.mjs';
 
 function isForcedMotionValue(key, { layout, layoutId }) {
     return (transformProps.has(key) ||

package/dist/es/framer-motion/dist/es/projection/animation/mix-values.mjs

@@ -1,7 +1,7 @@
-import { circOut } from '../../easing/circ.mjs';
-import { mixNumber } from '../../utils/mix/number.mjs';
-import { percent, px } from '../../value/types/numbers/units.mjs';
+import { mixNumber } from '../../../../../motion-dom/dist/es/utils/mix/number.mjs';
+import { percent, px } from '../../../../../motion-dom/dist/es/value/types/numbers/units.mjs';
 import { progress } from '../../../../../motion-utils/dist/es/progress.mjs';
+import { circOut } from '../../../../../motion-utils/dist/es/easing/circ.mjs';
 import { noop } from '../../../../../motion-utils/dist/es/noop.mjs';
 
 const borders = ["TopLeft", "TopRight", "BottomLeft", "BottomRight"];

package/dist/es/framer-motion/dist/es/projection/geometry/delta-apply.mjs

@@ -1,5 +1,5 @@
-import { mixNumber } from '../../utils/mix/number.mjs';
 import { hasTransform } from '../utils/has-transform.mjs';
+import { mixNumber } from '../../../../../motion-dom/dist/es/utils/mix/number.mjs';
 
 /**
  * Scales a point based on a factor and an originPoint

package/dist/es/framer-motion/dist/es/projection/geometry/delta-calc.mjs

@@ -1,4 +1,4 @@
-import { mixNumber } from '../../utils/mix/number.mjs';
+import { mixNumber } from '../../../../../motion-dom/dist/es/utils/mix/number.mjs';
 
 const SCALE_PRECISION = 0.0001;
 const SCALE_MIN = 1 - SCALE_PRECISION;

package/dist/es/framer-motion/dist/es/projection/geometry/delta-remove.mjs

@@ -1,6 +1,6 @@
-import { mixNumber } from '../../utils/mix/number.mjs';
-import { percent } from '../../value/types/numbers/units.mjs';
 import { scalePoint } from './delta-apply.mjs';
+import { percent } from '../../../../../motion-dom/dist/es/value/types/numbers/units.mjs';
+import { mixNumber } from '../../../../../motion-dom/dist/es/utils/mix/number.mjs';
 
 /**
  * Remove a delta from a point. This is essentially the steps of applyPointDelta in reverse

package/dist/es/framer-motion/dist/es/projection/node/create-projection-node.mjs

@@ -2,9 +2,7 @@ import { animateSingleValue } from '../../animation/animate/single-value.mjs';
 import { getOptimisedAppearId } from '../../animation/optimized-appear/get-appear-id.mjs';
 import { isSVGElement } from '../../render/dom/utils/is-svg-element.mjs';
 import { FlatTree } from '../../render/utils/flat-tree.mjs';
-import { clamp } from '../../utils/clamp.mjs';
 import { delay } from '../../utils/delay.mjs';
-import { mixNumber } from '../../utils/mix/number.mjs';
 import { resolveMotionValue } from '../../value/utils/resolve-motion-value.mjs';
 import { mixValues } from '../animation/mix-values.mjs';
 import { copyBoxInto, copyAxisDeltaInto } from '../geometry/copy.mjs';
@@ -24,8 +22,10 @@ import { SubscriptionManager } from '../../../../../motion-utils/dist/es/subscri
 import { getValueTransition } from '../../../../../motion-dom/dist/es/animation/utils/get-value-transition.mjs';
 import { cancelFrame, frameData, frameSteps, frame } from '../../../../../motion-dom/dist/es/frameloop/frame.mjs';
 import { time } from '../../../../../motion-dom/dist/es/frameloop/sync-time.mjs';
+import { clamp } from '../../../../../motion-utils/dist/es/clamp.mjs';
 import { microtask } from '../../../../../motion-dom/dist/es/frameloop/microtask.mjs';
 import { activeAnimations } from '../../../../../motion-dom/dist/es/stats/animation-count.mjs';
+import { mixNumber } from '../../../../../motion-dom/dist/es/utils/mix/number.mjs';
 import { noop } from '../../../../../motion-utils/dist/es/noop.mjs';
 
 const metrics = {
@@ -1000,9 +1000,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
         }
         setAnimationOrigin(delta, hasOnlyRelativeTargetChanged = false) {
             const snapshot = this.snapshot;
-            const snapshotLatestValues = snapshot
-                ? snapshot.latestValues
-                : {};
+            const snapshotLatestValues = snapshot ? snapshot.latestValues : {};
             const mixedValues = { ...this.latestValues };
             const targetDelta = createDelta();
             if (!this.relativeParent ||

package/dist/es/framer-motion/dist/es/projection/styles/scale-border-radius.mjs

@@ -1,4 +1,4 @@
-import { px } from '../../value/types/numbers/units.mjs';
+import { px } from '../../../../../motion-dom/dist/es/value/types/numbers/units.mjs';
 
 function pixelsToPercent(pixels, axis) {
     if (axis.max === axis.min)

package/dist/es/framer-motion/dist/es/projection/styles/scale-box-shadow.mjs

@@ -1,5 +1,5 @@
-import { mixNumber } from '../../utils/mix/number.mjs';
-import { complex } from '../../value/types/complex/index.mjs';
+import { complex } from '../../../../../motion-dom/dist/es/value/types/complex/index.mjs';
+import { mixNumber } from '../../../../../motion-dom/dist/es/utils/mix/number.mjs';
 
 const correctBoxShadow = {
     correct: (latest, { treeScale, projectionDelta }) => {

package/dist/es/framer-motion/dist/es/projection/styles/scale-correction.mjs

@@ -1,4 +1,4 @@
-import { isCSSVariableName } from '../../render/dom/utils/is-css-variable.mjs';
+import { isCSSVariableName } from '../../../../../motion-dom/dist/es/animation/utils/is-css-variable.mjs';
 
 const scaleCorrectors = {};
 function addScaleCorrector(correctors) {

package/dist/es/framer-motion/dist/es/render/VisualElement.mjs

@@ -1,23 +1,23 @@
 import { featureDefinitions } from '../motion/features/definitions.mjs';
 import { createBox } from '../projection/geometry/models.mjs';
-import { isNumericalString } from '../utils/is-numerical-string.mjs';
-import { isZeroValueString } from '../utils/is-zero-value-string.mjs';
 import { initPrefersReducedMotion } from '../utils/reduced-motion/index.mjs';
 import { hasReducedMotionListener, prefersReducedMotion } from '../utils/reduced-motion/state.mjs';
-import { complex } from '../value/types/complex/index.mjs';
 import { isMotionValue } from '../value/utils/is-motion-value.mjs';
-import { getAnimatableNone } from './dom/value-types/animatable-none.mjs';
-import { findValueType } from './dom/value-types/find.mjs';
-import { transformProps } from './html/utils/keys-transform.mjs';
 import { visualElementStore } from './store.mjs';
 import { isControllingVariants, isVariantNode } from './utils/is-controlling-variants.mjs';
-import { KeyframeResolver } from './utils/KeyframesResolver.mjs';
 import { updateMotionValuesFromProps } from './utils/motion-values.mjs';
 import { resolveVariantFromProps } from './utils/resolve-variants.mjs';
+import { KeyframeResolver } from '../../../../motion-dom/dist/es/animation/keyframes/KeyframesResolver.mjs';
 import { time } from '../../../../motion-dom/dist/es/frameloop/sync-time.mjs';
 import { frame, cancelFrame } from '../../../../motion-dom/dist/es/frameloop/frame.mjs';
 import { warnOnce } from '../../../../motion-utils/dist/es/warn-once.mjs';
+import { transformProps } from '../../../../motion-dom/dist/es/render/utils/keys-transform.mjs';
 import { motionValue } from '../../../../motion-dom/dist/es/value/index.mjs';
+import { isNumericalString } from '../../../../motion-utils/dist/es/is-numerical-string.mjs';
+import { isZeroValueString } from '../../../../motion-utils/dist/es/is-zero-value-string.mjs';
+import { findValueType } from '../../../../motion-dom/dist/es/value/types/utils/find.mjs';
+import { complex } from '../../../../motion-dom/dist/es/value/types/complex/index.mjs';
+import { getAnimatableNone } from '../../../../motion-dom/dist/es/value/types/utils/animatable-none.mjs';
 import { SubscriptionManager } from '../../../../motion-utils/dist/es/subscription-manager.mjs';
 
 const propEventHandlers = [

package/dist/es/framer-motion/dist/es/render/dom/DOMVisualElement.mjs

@@ -1,6 +1,6 @@
 import { isMotionValue } from '../../value/utils/is-motion-value.mjs';
 import { VisualElement } from '../VisualElement.mjs';
-import { DOMKeyframesResolver } from './DOMKeyframesResolver.mjs';
+import { DOMKeyframesResolver } from '../../../../../motion-dom/dist/es/animation/keyframes/DOMKeyframesResolver.mjs';
 
 class DOMVisualElement extends VisualElement {
     constructor() {

package/dist/es/framer-motion/dist/es/render/dom/scroll/attach-animation.mjs

@@ -0,0 +1,17 @@
+import { getTimeline } from './utils/get-timeline.mjs';
+import { observeTimeline } from '../../../../../../motion-dom/dist/es/scroll/observe.mjs';
+
+function attachToAnimation(animation, options) {
+    const timeline = getTimeline(options);
+    return animation.attachTimeline({
+        timeline,
+        observe: (valueAnimation) => {
+            valueAnimation.pause();
+            return observeTimeline((progress) => {
+                valueAnimation.time = valueAnimation.duration * progress;
+            }, timeline);
+        },
+    });
+}
+
+export { attachToAnimation };

package/dist/es/framer-motion/dist/es/render/dom/scroll/attach-function.mjs

@@ -0,0 +1,23 @@
+import { scrollInfo } from './track.mjs';
+import { getTimeline } from './utils/get-timeline.mjs';
+import { observeTimeline } from '../../../../../../motion-dom/dist/es/scroll/observe.mjs';
+
+/**
+ * If the onScroll function has two arguments, it's expecting
+ * more specific information about the scroll from scrollInfo.
+ */
+function isOnScrollWithInfo(onScroll) {
+    return onScroll.length === 2;
+}
+function attachToFunction(onScroll, options) {
+    if (isOnScrollWithInfo(onScroll)) {
+        return scrollInfo((info) => {
+            onScroll(info[options.axis].progress, info);
+        }, options);
+    }
+    else {
+        return observeTimeline(onScroll, getTimeline(options));
+    }
+}
+
+export { attachToFunction };