framer-motion 11.5.6 → 11.7.0

package/dist/cjs/client-entry.js

@@ -338,7 +338,7 @@ function createRenderBatcher(scheduleNextBatch, allowKeepAlive) {
     return { schedule, cancel, state, steps };
 }
 
-const { schedule: frame, cancel: cancelFrame, state: frameData, steps, } = createRenderBatcher(typeof requestAnimationFrame !== "undefined" ? requestAnimationFrame : noop, true);
+const { schedule: frame, cancel: cancelFrame, state: frameData, steps: frameSteps, } = createRenderBatcher(typeof requestAnimationFrame !== "undefined" ? requestAnimationFrame : noop, true);
 
 /**
  * Check if the value is a zero value string like "0px" or "0%"
@@ -1215,6 +1215,10 @@ function memo(callback) {
     };
 }
 
+function isGenerator(type) {
+    return typeof type === "function";
+}
+
 let now;
 function clearTime() {
     now = undefined;
@@ -1302,7 +1306,8 @@ function canAnimate(keyframes, name, type, velocity) {
     if (!isOriginAnimatable || !isTargetAnimatable) {
         return false;
     }
-    return hasKeyframesChanged(keyframes) || (type === "spring" && velocity);
+    return (hasKeyframesChanged(keyframes) ||
+        ((type === "spring" || isGenerator(type)) && velocity));
 }
 
 /**
@@ -2284,7 +2289,9 @@ class MainThreadAnimation extends BaseAnimation {
     }
     initPlayback(keyframes$1) {
         const { type = "keyframes", repeat = 0, repeatDelay = 0, repeatType, velocity = 0, } = this.options;
-        const generatorFactory = generators[type] || keyframes;
+        const generatorFactory = isGenerator(type)
+            ? type
+            : generators[type] || keyframes;
         /**
          * If our generator doesn't support mixing numbers, we need to replace keyframes with
          * [0, 100] and then make a function that maps that to the actual keyframes.
@@ -2672,7 +2679,9 @@ const maxDuration = 20000;
  * handing off.
  */
 function requiresPregeneratedKeyframes(options) {
-    return options.type === "spring" || !isWaapiSupportedEasing(options.ease);
+    return (isGenerator(options.type) ||
+        options.type === "spring" ||
+        !isWaapiSupportedEasing(options.ease));
 }
 function pregenerateKeyframes(keyframes, options) {
     /**
@@ -3032,14 +3041,7 @@ class GroupPlaybackControls {
     }
 }
 
-const animateMotionValue = (name, value, target, transition = {}, element, isHandoff, 
-/**
- * Currently used to remove values from will-change when an animation ends.
- * Preferably this would be handled by event listeners on the MotionValue
- * but these aren't consistent enough yet when considering the different ways
- * an animation can be cancelled.
- */
-onEnd) => (onComplete) => {
+const animateMotionValue = (name, value, target, transition = {}, element, isHandoff) => (onComplete) => {
     const valueTransition = getValueTransition(transition, name) || {};
     /**
      * Most transition values are currently completely overwritten by value-specific
@@ -3066,9 +3068,7 @@ onEnd) => (onComplete) => {
         onComplete: () => {
             onComplete();
             valueTransition.onComplete && valueTransition.onComplete();
-            onEnd && onEnd();
         },
-        onStop: onEnd,
         name,
         motionValue: value,
         element: isHandoff ? undefined : element,
@@ -3227,7 +3227,7 @@ class MotionValue {
          * This will be replaced by the build step with the latest version number.
          * When MotionValues are provided to motion components, warn if versions are mixed.
          */
-        this.version = "11.5.6";
+        this.version = "11.7.0";
         /**
          * Tracks whether this value can output a velocity. Currently this is only true
          * if the value is numerical, but we might be able to widen the scope here and support
@@ -3552,42 +3552,17 @@ function getWillChangeName(name) {
 class WillChangeMotionValue extends MotionValue {
     constructor() {
         super(...arguments);
-        this.output = [];
-        this.counts = new Map();
+        this.values = [];
     }
     add(name) {
         const styleName = getWillChangeName(name);
-        if (!styleName)
-            return;
-        /**
-         * Update counter. Each value has an indepdent counter
-         * as multiple sources could be requesting the same value
-         * gets added to will-change.
-         */
-        const prevCount = this.counts.get(styleName) || 0;
-        this.counts.set(styleName, prevCount + 1);
-        if (prevCount === 0) {
-            this.output.push(styleName);
+        if (styleName) {
+            addUniqueItem(this.values, styleName);
             this.update();
         }
-        /**
-         * Prevents the remove function from being called multiple times.
-         */
-        let hasRemoved = false;
-        return () => {
-            if (hasRemoved)
-                return;
-            hasRemoved = true;
-            const newCount = this.counts.get(styleName) - 1;
-            this.counts.set(styleName, newCount);
-            if (newCount === 0) {
-                removeItem(this.output, styleName);
-                this.update();
-            }
-        };
     }
     update() {
-        this.set(this.output.length ? this.output.join(", ") : "auto");
+        this.set(this.values.length ? this.values.join(", ") : "auto");
     }
 }
 
@@ -3666,9 +3641,10 @@ function animateTarget(visualElement, targetAndTransition, { delay = 0, transiti
                 }
             }
         }
+        addValueToWillChange(visualElement, key);
         value.start(animateMotionValue(key, value, valueTarget, visualElement.shouldReduceMotion && transformProps.has(key)
             ? { type: false }
-            : valueTransition, visualElement, isHandoff, addValueToWillChange(visualElement, key)));
+            : valueTransition, visualElement, isHandoff));
         const animation = value.animation;
         if (animation) {
             animations.push(animation);
@@ -4869,7 +4845,6 @@ class VisualElementDragControls {
             }
         };
         const onStart = (event, info) => {
-            var _a;
             // Attempt to grab the global drag gesture lock - maybe make this part of PanSession
             const { drag, dragPropagation, onDragStart } = this.getProps();
             if (drag && !dragPropagation) {
@@ -4911,8 +4886,7 @@ class VisualElementDragControls {
             if (onDragStart) {
                 frame.postRender(() => onDragStart(event, info));
             }
-            (_a = this.removeWillChange) === null || _a === void 0 ? void 0 : _a.call(this);
-            this.removeWillChange = addValueToWillChange(this.visualElement, "transform");
+            addValueToWillChange(this.visualElement, "transform");
             const { animationState } = this.visualElement;
             animationState && animationState.setActive("whileDrag", true);
         };
@@ -4968,8 +4942,6 @@ class VisualElementDragControls {
         });
     }
     stop(event, info) {
-        var _a;
-        (_a = this.removeWillChange) === null || _a === void 0 ? void 0 : _a.call(this);
         const isDragging = this.isDragging;
         this.cancel();
         if (!isDragging)
@@ -5111,7 +5083,8 @@ class VisualElementDragControls {
     }
     startAxisValueAnimation(axis, transition) {
         const axisValue = this.getAxisMotionValue(axis);
-        return axisValue.start(animateMotionValue(axis, axisValue, 0, transition, this.visualElement, false, addValueToWillChange(this.visualElement, axis)));
+        addValueToWillChange(this.visualElement, axis);
+        return axisValue.start(animateMotionValue(axis, axisValue, 0, transition, this.visualElement, false));
     }
     stopAnimation() {
         eachAxis((axis) => this.getAxisMotionValue(axis).stop());
@@ -5877,7 +5850,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "11.5.6", `Attempting to mix Framer Motion versions ${nextValue.version} with 11.5.6 may not work as expected.`);
+                warnOnce(nextValue.version === "11.7.0", `Attempting to mix Framer Motion versions ${nextValue.version} with 11.7.0 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {
@@ -7214,9 +7187,9 @@ function createProjectionNode$1({ attachResizeListener, defaultParent, measureSc
             frameData.delta = clamp(0, 1000 / 60, now - frameData.timestamp);
             frameData.timestamp = now;
             frameData.isProcessing = true;
-            steps.update.process(frameData);
-            steps.preRender.process(frameData);
-            steps.render.process(frameData);
+            frameSteps.update.process(frameData);
+            frameSteps.preRender.process(frameData);
+            frameSteps.render.process(frameData);
             frameData.isProcessing = false;
         }
         didUpdate() {

package/dist/cjs/dom-entry.js

@@ -156,7 +156,7 @@ function createRenderBatcher(scheduleNextBatch, allowKeepAlive) {
     return { schedule, cancel, state, steps };
 }
 
-const { schedule: frame, cancel: cancelFrame, state: frameData, steps, } = createRenderBatcher(typeof requestAnimationFrame !== "undefined" ? requestAnimationFrame : noop, true);
+const { schedule: frame, cancel: cancelFrame, state: frameData, steps: frameSteps, } = createRenderBatcher(typeof requestAnimationFrame !== "undefined" ? requestAnimationFrame : noop, true);
 
 function addUniqueItem(arr, item) {
     if (arr.indexOf(item) === -1)
@@ -279,7 +279,7 @@ class MotionValue {
          * This will be replaced by the build step with the latest version number.
          * When MotionValues are provided to motion components, warn if versions are mixed.
          */
-        this.version = "11.5.6";
+        this.version = "11.7.0";
         /**
          * Tracks whether this value can output a velocity. Currently this is only true
          * if the value is numerical, but we might be able to widen the scope here and support
@@ -1658,6 +1658,10 @@ class DOMKeyframesResolver extends KeyframeResolver {
     }
 }
 
+function isGenerator(type) {
+    return typeof type === "function";
+}
+
 /**
  * Check if a value is animatable. Examples:
  *
@@ -1718,7 +1722,8 @@ function canAnimate(keyframes, name, type, velocity) {
     if (!isOriginAnimatable || !isTargetAnimatable) {
         return false;
     }
-    return hasKeyframesChanged(keyframes) || (type === "spring" && velocity);
+    return (hasKeyframesChanged(keyframes) ||
+        ((type === "spring" || isGenerator(type)) && velocity));
 }
 
 /**
@@ -2690,7 +2695,9 @@ class MainThreadAnimation extends BaseAnimation {
     }
     initPlayback(keyframes$1) {
         const { type = "keyframes", repeat = 0, repeatDelay = 0, repeatType, velocity = 0, } = this.options;
-        const generatorFactory = generators[type] || keyframes;
+        const generatorFactory = isGenerator(type)
+            ? type
+            : generators[type] || keyframes;
         /**
          * If our generator doesn't support mixing numbers, we need to replace keyframes with
          * [0, 100] and then make a function that maps that to the actual keyframes.
@@ -3078,7 +3085,9 @@ const maxDuration = 20000;
  * handing off.
  */
 function requiresPregeneratedKeyframes(options) {
-    return options.type === "spring" || !isWaapiSupportedEasing(options.ease);
+    return (isGenerator(options.type) ||
+        options.type === "spring" ||
+        !isWaapiSupportedEasing(options.ease));
 }
 function pregenerateKeyframes(keyframes, options) {
     /**
@@ -3342,14 +3351,7 @@ class AcceleratedAnimation extends BaseAnimation {
     }
 }
 
-const animateMotionValue = (name, value, target, transition = {}, element, isHandoff, 
-/**
- * Currently used to remove values from will-change when an animation ends.
- * Preferably this would be handled by event listeners on the MotionValue
- * but these aren't consistent enough yet when considering the different ways
- * an animation can be cancelled.
- */
-onEnd) => (onComplete) => {
+const animateMotionValue = (name, value, target, transition = {}, element, isHandoff) => (onComplete) => {
     const valueTransition = getValueTransition$1(transition, name) || {};
     /**
      * Most transition values are currently completely overwritten by value-specific
@@ -3376,9 +3378,7 @@ onEnd) => (onComplete) => {
         onComplete: () => {
             onComplete();
             valueTransition.onComplete && valueTransition.onComplete();
-            onEnd && onEnd();
         },
-        onStop: onEnd,
         name,
         motionValue: value,
         element: isHandoff ? undefined : element,
@@ -3540,42 +3540,17 @@ function getWillChangeName(name) {
 class WillChangeMotionValue extends MotionValue {
     constructor() {
         super(...arguments);
-        this.output = [];
-        this.counts = new Map();
+        this.values = [];
     }
     add(name) {
         const styleName = getWillChangeName(name);
-        if (!styleName)
-            return;
-        /**
-         * Update counter. Each value has an indepdent counter
-         * as multiple sources could be requesting the same value
-         * gets added to will-change.
-         */
-        const prevCount = this.counts.get(styleName) || 0;
-        this.counts.set(styleName, prevCount + 1);
-        if (prevCount === 0) {
-            this.output.push(styleName);
+        if (styleName) {
+            addUniqueItem(this.values, styleName);
             this.update();
         }
-        /**
-         * Prevents the remove function from being called multiple times.
-         */
-        let hasRemoved = false;
-        return () => {
-            if (hasRemoved)
-                return;
-            hasRemoved = true;
-            const newCount = this.counts.get(styleName) - 1;
-            this.counts.set(styleName, newCount);
-            if (newCount === 0) {
-                removeItem(this.output, styleName);
-                this.update();
-            }
-        };
     }
     update() {
-        this.set(this.output.length ? this.output.join(", ") : "auto");
+        this.set(this.values.length ? this.values.join(", ") : "auto");
     }
 }
 
@@ -3654,9 +3629,10 @@ function animateTarget(visualElement, targetAndTransition, { delay = 0, transiti
                 }
             }
         }
+        addValueToWillChange(visualElement, key);
         value.start(animateMotionValue(key, value, valueTarget, visualElement.shouldReduceMotion && transformProps.has(key)
             ? { type: false }
-            : valueTransition, visualElement, isHandoff, addValueToWillChange(visualElement, key)));
+            : valueTransition, visualElement, isHandoff));
         const animation = value.animation;
         if (animation) {
             animations.push(animation);
@@ -3790,7 +3766,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "11.5.6", `Attempting to mix Framer Motion versions ${nextValue.version} with 11.5.6 may not work as expected.`);
+                warnOnce(nextValue.version === "11.7.0", `Attempting to mix Framer Motion versions ${nextValue.version} with 11.7.0 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {
@@ -4892,7 +4868,7 @@ function createAnimationsFromSequence(sequence, { defaultTransition = {}, ...seq
              * If this animation should and can use a spring, generate a spring easing function.
              */
             const numKeyframes = valueKeyframesAsList.length;
-            if (numKeyframes <= 2 && type === "spring") {
+            if ((numKeyframes <= 2 && type === "spring") || isGenerator(type)) {
                 /**
                  * As we're creating an easing function from a spring,
                  * ideally we want to generate it using the real distance
@@ -5584,34 +5560,71 @@ function scrollInfo(onScroll, { container = document.documentElement, ...options
     };
 }
 
-function scrollTimelineFallback({ source, axis = "y" }) {
+function scrollTimelineFallback({ source, container, axis = "y", }) {
+    // Support legacy source argument. Deprecate later.
+    if (source)
+        container = source;
     // ScrollTimeline records progress as a percentage CSSUnitValue
     const currentTime = { value: 0 };
     const cancel = scrollInfo((info) => {
         currentTime.value = info[axis].progress * 100;
-    }, { container: source, axis });
+    }, { container, axis });
     return { currentTime, cancel };
 }
 const timelineCache = new Map();
-function getTimeline({ source = document.documentElement, axis = "y", } = {}) {
-    if (!timelineCache.has(source)) {
-        timelineCache.set(source, {});
-    }
-    const elementCache = timelineCache.get(source);
+function getTimeline({ source, container = document.documentElement, axis = "y", } = {}) {
+    // Support legacy source argument. Deprecate later.
+    if (source)
+        container = source;
+    if (!timelineCache.has(container)) {
+        timelineCache.set(container, {});
+    }
+    const elementCache = timelineCache.get(container);
     if (!elementCache[axis]) {
         elementCache[axis] = supportsScrollTimeline()
-            ? new ScrollTimeline({ source, axis })
-            : scrollTimelineFallback({ source, axis });
+            ? new ScrollTimeline({ source: container, axis })
+            : scrollTimelineFallback({ source: container, axis });
     }
     return elementCache[axis];
 }
+function isOnScrollWithInfo(onScroll) {
+    return onScroll.length === 2;
+}
+function needsMainThreadScrollTracking(options) {
+    return options && (options.target || options.offset);
+}
 function scroll(onScroll, options) {
-    const timeline = getTimeline(options);
+    const axis = (options === null || options === void 0 ? void 0 : options.axis) || "y";
     if (typeof onScroll === "function") {
-        return observeTimeline(onScroll, timeline);
+        /**
+         * If the onScroll function has two arguments, it's expecting
+         * more specific information about the scroll from scrollInfo.
+         */
+        if (isOnScrollWithInfo(onScroll) ||
+            needsMainThreadScrollTracking(options)) {
+            return scrollInfo((info) => {
+                onScroll(info[axis].progress, info);
+            }, options);
+        }
+        else {
+            return observeTimeline(onScroll, getTimeline(options));
+        }
     }
     else {
-        return onScroll.attachTimeline(timeline);
+        /**
+         * If we need main thread scroll tracking because we're tracking
+         * a target or defined offsets, we need to create a scrollInfo timeline.
+         * Over time the number of sitauations where this is true
+         */
+        if (needsMainThreadScrollTracking(options)) {
+            onScroll.pause();
+            return scrollInfo((info) => {
+                onScroll.time = onScroll.duration * info[axis].progress;
+            }, options);
+        }
+        else {
+            return onScroll.attachTimeline(getTimeline(options));
+        }
     }
 }
 
@@ -5655,6 +5668,18 @@ 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 clamp(0, 1, rounded / numSteps);
+    };
+}
+
 function getOriginIndex(from, total) {
     if (from === "first") {
         return 0;
@@ -5758,6 +5783,7 @@ exports.easeInOut = easeInOut;
 exports.easeOut = easeOut;
 exports.frame = frame;
 exports.frameData = frameData;
+exports.frameSteps = frameSteps;
 exports.inView = inView;
 exports.interpolate = interpolate;
 exports.mirrorEasing = mirrorEasing;