framer-motion 12.7.4 → 12.7.5-alpha.1

package/dist/cjs/index.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
-var create = require('./create-BErHrlzf.js');
+var create = require('./create-D5a67TOR.js');
 var motionDom = require('motion-dom');
 var motionUtils = require('motion-utils');
 
@@ -553,7 +553,7 @@ function checkReorder(order, value, offset, velocity) {
         return order;
     const item = order[index];
     const nextLayout = nextItem.layout;
-    const nextItemCenter = create.mixNumber(nextLayout.min, nextLayout.max, 0.5);
+    const nextItemCenter = motionDom.mixNumber(nextLayout.min, nextLayout.max, 0.5);
     if ((nextOffset === 1 && item.layout.max + offset > nextItemCenter) ||
         (nextOffset === -1 && item.layout.min + offset < nextItemCenter)) {
         return motionUtils.moveItem(order, index, index + nextOffset);
@@ -647,7 +647,7 @@ function transform(...args) {
     const inputRange = args[1 + argOffset];
     const outputRange = args[2 + argOffset];
     const options = args[3 + argOffset];
-    const interpolator = create.interpolate(inputRange, outputRange, {
+    const interpolator = motionDom.interpolate(inputRange, outputRange, {
         mixer: getMixer(outputRange[0]),
         ...options,
     });
@@ -752,15 +752,6 @@ var namespace = /*#__PURE__*/Object.freeze({
     Item: ReorderItem
 });
 
-const wrap = (min, max, v) => {
-    const rangeSize = max - min;
-    return ((((v - min) % rangeSize) + rangeSize) % rangeSize) + min;
-};
-
-function getEasingForSegment(easing, i) {
-    return create.isEasingArray(easing) ? easing[wrap(0, easing.length, i)] : easing;
-}
-
 function isDOMKeyframes(keyframes) {
     return typeof keyframes === "object" && !Array.isArray(keyframes);
 }
@@ -823,8 +814,8 @@ function addKeyframes(sequence, keyframes, easing, offset, startTime, endTime) {
     for (let i = 0; i < keyframes.length; i++) {
         sequence.push({
             value: keyframes[i],
-            at: create.mixNumber(startTime, endTime, offset[i]),
-            easing: getEasingForSegment(easing, i),
+            at: motionDom.mixNumber(startTime, endTime, offset[i]),
+            easing: motionUtils.getEasingForSegment(easing, i),
         });
     }
 }
@@ -898,7 +889,7 @@ function createAnimationsFromSequence(sequence, { defaultTransition = {}, ...seq
         let maxDuration = 0;
         const resolveValueSequence = (valueKeyframes, valueTransition, valueSequence, elementIndex = 0, numSubjects = 0) => {
             const valueKeyframesAsList = keyframesAsList(valueKeyframes);
-            const { delay = 0, times = create.defaultOffset(valueKeyframesAsList), type = "keyframes", repeat, repeatType, repeatDelay = 0, ...remainingTransition } = valueTransition;
+            const { delay = 0, times = motionDom.defaultOffset(valueKeyframesAsList), type = "keyframes", repeat, repeatType, repeatDelay = 0, ...remainingTransition } = valueTransition;
             let { ease = defaultTransition.ease || "easeOut", duration } = valueTransition;
             /**
              * Resolve stagger() if defined.
@@ -946,7 +937,7 @@ function createAnimationsFromSequence(sequence, { defaultTransition = {}, ...seq
              * Fill out if offset if fewer offsets than keyframes
              */
             const remainder = times.length - valueKeyframesAsList.length;
-            remainder > 0 && create.fillOffset(times, remainder);
+            remainder > 0 && motionDom.fillOffset(times, remainder);
             /**
              * If only one value has been set, ie [1], push a null to the start of
              * the keyframe array. This will let us mark a keyframe at this point
@@ -970,7 +961,7 @@ function createAnimationsFromSequence(sequence, { defaultTransition = {}, ...seq
                         times.push(originalTimes[keyframeIndex] + (repeatIndex + 1));
                         ease.push(keyframeIndex === 0
                             ? "linear"
-                            : getEasingForSegment(originalEase, keyframeIndex - 1));
+                            : motionUtils.getEasingForSegment(originalEase, keyframeIndex - 1));
                     }
                 }
                 normalizeTimes(times, repeat);
@@ -1211,7 +1202,7 @@ function animateSubject(subject, keyframes, options, scope) {
 
 function animateSequence(sequence, options, scope) {
     const animations = [];
-    const animationDefinitions = createAnimationsFromSequence(sequence, options, scope, { spring: create.spring });
+    const animationDefinitions = createAnimationsFromSequence(sequence, options, scope, { spring: motionDom.spring });
     animationDefinitions.forEach(({ keyframes, transition }, subject) => {
         animations.push(...animateSubject(subject, keyframes, transition));
     });
@@ -1251,7 +1242,27 @@ function animateElements(elementOrSelector, keyframes, options, scope) {
     const elements = motionDom.resolveElements(elementOrSelector, scope);
     const numElements = elements.length;
     motionUtils.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 };
@@ -1262,21 +1273,69 @@ 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 = {
                 ...motionDom.getValueTransition(elementTransition, valueName),
             };
             valueOptions.duration && (valueOptions.duration = motionUtils.secondsToMilliseconds(valueOptions.duration));
             valueOptions.delay && (valueOptions.delay = motionUtils.secondsToMilliseconds(valueOptions.delay));
-            animations.push(new motionDom.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 = motionDom.getAnimationMap(element);
+            const key = motionDom.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] = motionDom.getComputedStyle(element, name);
+        }
+        motionDom.fillWildcards(unresolvedKeyframes);
+        motionDom.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(motionDom.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 motionDom.NativeAnimation(animationOptions);
+        map.set(key, animation);
+        animation.finished.finally(() => map.delete(key));
+        animations.push(animation);
+    }
     return animations;
 }
 
@@ -1288,21 +1347,6 @@ const createScopedWaapiAnimate = (scope) => {
 };
 const animateMini = /*@__PURE__*/ createScopedWaapiAnimate();
 
-function observeTimeline(update, timeline) {
-    let prevProgress;
-    const onFrame = () => {
-        const { currentTime } = timeline;
-        const percentage = currentTime === null ? 0 : currentTime.value;
-        const progress = percentage / 100;
-        if (prevProgress !== progress) {
-            update(progress);
-        }
-        prevProgress = progress;
-    };
-    motionDom.frame.update(onFrame, true);
-    return () => motionDom.cancelFrame(onFrame);
-}
-
 const resizeHandlers = new WeakMap();
 let observer;
 function getElementSize(target, borderBoxSize) {
@@ -1633,10 +1677,10 @@ function resolveOffsets(container, info, options) {
      * to map scroll value into a progress.
      */
     if (hasChanged) {
-        info[axis].interpolate = create.interpolate(info[axis].offset, create.defaultOffset(offsetDefinition), { clamp: false });
+        info[axis].interpolate = motionDom.interpolate(info[axis].offset, motionDom.defaultOffset(offsetDefinition), { clamp: false });
         info[axis].interpolatorOffsets = [...info[axis].offset];
     }
-    info[axis].progress = create.clamp(0, 1, info[axis].interpolate(info[axis].current));
+    info[axis].progress = motionUtils.clamp(0, 1, info[axis].interpolate(info[axis].current));
 }
 
 function measure(container, target = container, info) {
@@ -1759,33 +1803,45 @@ function scrollInfo(onScroll, { container = document.documentElement, ...options
     };
 }
 
-function scrollTimelineFallback({ source, container, axis = "y", }) {
-    // Support legacy source argument. Deprecate later.
-    if (source)
-        container = source;
-    // ScrollTimeline records progress as a percentage CSSUnitValue
+const timelineCache = new Map();
+function scrollTimelineFallback(options) {
     const currentTime = { value: 0 };
     const cancel = scrollInfo((info) => {
-        currentTime.value = info[axis].progress * 100;
-    }, { container, axis });
+        currentTime.value = info[options.axis].progress * 100;
+    }, options);
     return { currentTime, cancel };
 }
-const timelineCache = new Map();
-function getTimeline({ source, container = document.documentElement, axis = "y", } = {}) {
-    // Support legacy source argument. Deprecate later.
+function getTimeline({ source, container, ...options }) {
+    const { axis } = options;
     if (source)
         container = source;
-    if (!timelineCache.has(container)) {
-        timelineCache.set(container, {});
-    }
-    const elementCache = timelineCache.get(container);
-    if (!elementCache[axis]) {
-        elementCache[axis] = motionDom.supportsScrollTimeline()
-            ? new ScrollTimeline({ source: container, axis })
-            : scrollTimelineFallback({ source: container, axis });
-    }
-    return elementCache[axis];
+    const containerCache = timelineCache.get(container) ?? new Map();
+    timelineCache.set(container, containerCache);
+    const targetKey = options.target ?? "self";
+    const targetCache = containerCache.get(targetKey) ?? {};
+    const axisKey = axis + (options.offset ?? []).join(",");
+    if (!targetCache[axisKey]) {
+        targetCache[axisKey] =
+            !options.target && motionDom.supportsScrollTimeline()
+                ? new ScrollTimeline({ source: container, axis })
+                : scrollTimelineFallback({ container, ...options });
+    }
+    return targetCache[axis];
+}
+
+function attachToAnimation(animation, options) {
+    const timeline = getTimeline(options);
+    return animation.attachTimeline({
+        timeline: options.target ? undefined : timeline,
+        observe: (valueAnimation) => {
+            valueAnimation.pause();
+            return motionDom.observeTimeline((progress) => {
+                valueAnimation.time = valueAnimation.duration * progress;
+            }, timeline);
+        },
+    });
 }
+
 /**
  * If the onScroll function has two arguments, it's expecting
  * more specific information about the scroll from scrollInfo.
@@ -1793,51 +1849,22 @@ function getTimeline({ source, container = document.documentElement, axis = "y",
 function isOnScrollWithInfo(onScroll) {
     return onScroll.length === 2;
 }
-/**
- * Currently, we only support element tracking with `scrollInfo`, though in
- * the future we can also offer ViewTimeline support.
- */
-function needsElementTracking(options) {
-    return options && (options.target || options.offset);
-}
-function scrollFunction(onScroll, options) {
-    if (isOnScrollWithInfo(onScroll) || needsElementTracking(options)) {
+function attachToFunction(onScroll, options) {
+    if (isOnScrollWithInfo(onScroll)) {
         return scrollInfo((info) => {
             onScroll(info[options.axis].progress, info);
         }, options);
     }
     else {
-        return observeTimeline(onScroll, getTimeline(options));
-    }
-}
-function scrollAnimation(animation, options) {
-    animation.flatten();
-    if (needsElementTracking(options)) {
-        animation.pause();
-        return scrollInfo((info) => {
-            animation.time = animation.duration * info[options.axis].progress;
-        }, options);
-    }
-    else {
-        const timeline = getTimeline(options);
-        if (animation.attachTimeline) {
-            return animation.attachTimeline(timeline, (valueAnimation) => {
-                valueAnimation.pause();
-                return observeTimeline((progress) => {
-                    valueAnimation.time = valueAnimation.duration * progress;
-                }, timeline);
-            });
-        }
-        else {
-            return motionUtils.noop;
-        }
+        return motionDom.observeTimeline(onScroll, getTimeline(options));
     }
 }
-function scroll(onScroll, { axis = "y", ...options } = {}) {
-    const optionsWithDefaults = { axis, ...options };
+
+function scroll(onScroll, { axis = "y", container = document.documentElement, ...options } = {}) {
+    const optionsWithDefaults = { axis, container, ...options };
     return typeof onScroll === "function"
-        ? scrollFunction(onScroll, optionsWithDefaults)
-        : scrollAnimation(onScroll, optionsWithDefaults);
+        ? attachToFunction(onScroll, optionsWithDefaults)
+        : attachToAnimation(onScroll, optionsWithDefaults);
 }
 
 const thresholds = {
@@ -1880,18 +1907,6 @@ function inView(elementOrSelector, onStart, { root, margin: rootMargin, amount =
     return () => observer.disconnect();
 }
 
-function steps(numSteps, direction = "end") {
-    return (progress) => {
-        progress =
-            direction === "end"
-                ? Math.min(progress, 0.999)
-                : Math.max(progress, 0.001);
-        const expanded = progress * numSteps;
-        const rounded = direction === "end" ? Math.floor(expanded) : Math.ceil(expanded);
-        return create.clamp(0, 1, rounded / numSteps);
-    };
-}
-
 function getOriginIndex(from, total) {
     if (from === "first") {
         return 0;
@@ -1908,7 +1923,7 @@ function stagger(duration = 0.1, { startDelay = 0, from = 0, ease } = {}) {
         let delay = duration * distance;
         if (ease) {
             const maxDelay = total * duration;
-            const easingFunction = create.easingDefinitionToFunction(ease);
+            const easingFunction = motionUtils.easingDefinitionToFunction(ease);
             delay = easingFunction(delay / maxDelay) * maxDelay;
         }
         return startDelay + delay;
@@ -2064,7 +2079,7 @@ function useSpring(source, config = {}) {
     const latestSetter = React.useRef(motionUtils.noop);
     const startAnimation = () => {
         stopAnimation();
-        activeSpringAnimation.current = create.animateValue({
+        activeSpringAnimation.current = new motionDom.JSAnimation({
             keyframes: [asNumber(value.get()), asNumber(latestValue.current)],
             velocity: value.getVelocity(),
             type: "spring",
@@ -2156,10 +2171,10 @@ function useVelocity(value) {
 }
 
 function getWillChangeName(name) {
-    if (create.transformProps.has(name)) {
+    if (motionDom.transformProps.has(name)) {
         return "transform";
     }
-    else if (create.acceleratedValues.has(name)) {
+    else if (motionDom.acceleratedValues.has(name)) {
         return create.camelToDash(name);
     }
 }
@@ -2570,7 +2585,7 @@ function useCycle(...items) {
     const runCycle = React.useCallback((next) => {
         index.current =
             typeof next !== "number"
-                ? wrap(0, items.length, index.current + 1)
+                ? motionUtils.wrap(0, items.length, index.current + 1)
                 : next;
         setItem(items[index.current]);
     }, 
@@ -2618,12 +2633,12 @@ function useInstantTransition() {
              */
             if (forcedRenderCount !== unlockOnFrameRef.current)
                 return;
-            create.instantAnimationState.current = false;
+            motionUtils.MotionGlobalConfig.instantAnimations = false;
         }));
     }, [forcedRenderCount]);
     return (callback) => {
         startInstantLayoutTransition(() => {
-            create.instantAnimationState.current = true;
+            motionUtils.MotionGlobalConfig.instantAnimations = true;
             forceUpdate();
             callback();
             unlockOnFrameRef.current = forcedRenderCount + 1;
@@ -2631,14 +2646,14 @@ function useInstantTransition() {
     };
 }
 function disableInstantTransitions() {
-    create.instantAnimationState.current = false;
+    motionUtils.MotionGlobalConfig.instantAnimations = false;
 }
 
 const appearAnimationStore = new Map();
 const appearComplete = new Map();
 
 const appearStoreId = (elementId, valueName) => {
-    const key = create.transformProps.has(valueName) ? "transform" : valueName;
+    const key = motionDom.transformProps.has(valueName) ? "transform" : valueName;
     return `${elementId}: ${key}`;
 };
 
@@ -2947,7 +2962,6 @@ function useInvertedScale(scale) {
     return { scaleX, scaleY };
 }
 
-exports.AcceleratedAnimation = create.AcceleratedAnimation;
 exports.FlatTree = create.FlatTree;
 exports.LayoutGroupContext = create.LayoutGroupContext;
 exports.MotionConfigContext = create.MotionConfigContext;
@@ -2958,111 +2972,30 @@ exports.VisualElement = create.VisualElement;
 exports.addPointerEvent = create.addPointerEvent;
 exports.addPointerInfo = create.addPointerInfo;
 exports.addScaleCorrector = create.addScaleCorrector;
-exports.animateValue = create.animateValue;
 exports.animateVisualElement = create.animateVisualElement;
 exports.animations = create.animations;
-exports.anticipate = create.anticipate;
-exports.backIn = create.backIn;
-exports.backInOut = create.backInOut;
-exports.backOut = create.backOut;
 exports.buildTransform = create.buildTransform;
 exports.calcLength = create.calcLength;
-exports.circIn = create.circIn;
-exports.circInOut = create.circInOut;
-exports.circOut = create.circOut;
-exports.clamp = create.clamp;
-exports.color = create.color;
-exports.complex = create.complex;
 exports.createBox = create.createBox;
 exports.createRendererMotionComponent = create.createRendererMotionComponent;
-exports.cubicBezier = create.cubicBezier;
 exports.delay = create.delay;
 exports.distance = create.distance;
 exports.distance2D = create.distance2D;
-exports.easeIn = create.easeIn;
-exports.easeInOut = create.easeInOut;
-exports.easeOut = create.easeOut;
 exports.filterProps = create.filterProps;
-exports.findSpring = create.findSpring;
-exports.inertia = create.inertia;
-exports.interpolate = create.interpolate;
 exports.isBrowser = create.isBrowser;
 exports.isMotionValue = create.isMotionValue;
 exports.isValidMotionProp = create.isValidMotionProp;
-exports.keyframes = create.keyframes;
 exports.makeUseVisualState = create.makeUseVisualState;
-exports.mirrorEasing = create.mirrorEasing;
-exports.mix = create.mix;
 exports.optimizedAppearDataAttribute = create.optimizedAppearDataAttribute;
-exports.pipe = create.pipe;
-exports.px = create.px;
 exports.resolveMotionValue = create.resolveMotionValue;
-exports.reverseEasing = create.reverseEasing;
-exports.spring = create.spring;
 exports.useIsPresent = create.useIsPresent;
 exports.useIsomorphicLayoutEffect = create.useIsomorphicLayoutEffect;
 exports.usePresence = create.usePresence;
 exports.visualElementStore = create.visualElementStore;
-Object.defineProperty(exports, "MotionValue", {
-    enumerable: true,
-    get: function () { return motionDom.MotionValue; }
-});
-Object.defineProperty(exports, "cancelFrame", {
-    enumerable: true,
-    get: function () { return motionDom.cancelFrame; }
-});
-Object.defineProperty(exports, "cancelSync", {
-    enumerable: true,
-    get: function () { return motionDom.cancelSync; }
-});
-Object.defineProperty(exports, "frame", {
-    enumerable: true,
-    get: function () { return motionDom.frame; }
-});
-Object.defineProperty(exports, "frameData", {
-    enumerable: true,
-    get: function () { return motionDom.frameData; }
-});
-Object.defineProperty(exports, "hover", {
-    enumerable: true,
-    get: function () { return motionDom.hover; }
-});
-Object.defineProperty(exports, "isDragActive", {
-    enumerable: true,
-    get: function () { return motionDom.isDragActive; }
-});
-Object.defineProperty(exports, "motionValue", {
-    enumerable: true,
-    get: function () { return motionDom.motionValue; }
-});
-Object.defineProperty(exports, "press", {
-    enumerable: true,
-    get: function () { return motionDom.press; }
-});
-Object.defineProperty(exports, "sync", {
-    enumerable: true,
-    get: function () { return motionDom.sync; }
-});
-Object.defineProperty(exports, "time", {
-    enumerable: true,
-    get: function () { return motionDom.time; }
-});
 Object.defineProperty(exports, "MotionGlobalConfig", {
     enumerable: true,
     get: function () { return motionUtils.MotionGlobalConfig; }
 });
-Object.defineProperty(exports, "invariant", {
-    enumerable: true,
-    get: function () { return motionUtils.invariant; }
-});
-Object.defineProperty(exports, "noop", {
-    enumerable: true,
-    get: function () { return motionUtils.noop; }
-});
-Object.defineProperty(exports, "progress", {
-    enumerable: true,
-    get: function () { return motionUtils.progress; }
-});
 exports.AnimatePresence = AnimatePresence;
 exports.AnimateSharedLayout = AnimateSharedLayout;
 exports.DeprecatedLayoutGroupContext = DeprecatedLayoutGroupContext;
@@ -3088,7 +3021,6 @@ exports.scroll = scroll;
 exports.scrollInfo = scrollInfo;
 exports.stagger = stagger;
 exports.startOptimizedAppearAnimation = startOptimizedAppearAnimation;
-exports.steps = steps;
 exports.transform = transform;
 exports.unwrapMotionComponent = unwrapMotionComponent;
 exports.useAnimate = useAnimate;
@@ -3121,4 +3053,15 @@ exports.useUnmountEffect = useUnmountEffect;
 exports.useVelocity = useVelocity;
 exports.useViewportScroll = useViewportScroll;
 exports.useWillChange = useWillChange;
-exports.wrap = wrap;
+Object.keys(motionDom).forEach(function (k) {
+    if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+        enumerable: true,
+        get: function () { return motionDom[k]; }
+    });
+});
+Object.keys(motionUtils).forEach(function (k) {
+    if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+        enumerable: true,
+        get: function () { return motionUtils[k]; }
+    });
+});