framer-motion 11.5.5 → 11.6.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%"
@@ -3032,14 +3032,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 +3059,7 @@ onEnd) => (onComplete) => {
         onComplete: () => {
             onComplete();
             valueTransition.onComplete && valueTransition.onComplete();
-            onEnd && onEnd();
         },
-        onStop: onEnd,
         name,
         motionValue: value,
         element: isHandoff ? undefined : element,
@@ -3227,7 +3218,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.5";
+        this.version = "11.6.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 +3543,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 +3632,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 +4836,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 +4877,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 +4933,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 +5074,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 +5841,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "11.5.5", `Attempting to mix Framer Motion versions ${nextValue.version} with 11.5.5 may not work as expected.`);
+                warnOnce(nextValue.version === "11.6.0", `Attempting to mix Framer Motion versions ${nextValue.version} with 11.6.0 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {
@@ -6038,16 +6002,16 @@ class VisualElement {
         this.propEventSubscriptions = {};
         this.notifyUpdate = () => this.notify("Update", this.latestValues);
         this.render = () => {
-            this.isRenderScheduled = false;
             if (!this.current)
                 return;
             this.triggerBuild();
             this.renderInstance(this.current, this.renderState, this.props.style, this.projection);
         };
-        this.isRenderScheduled = false;
+        this.renderScheduledAt = 0.0;
         this.scheduleRender = () => {
-            if (!this.isRenderScheduled) {
-                this.isRenderScheduled = true;
+            const now = time.now();
+            if (this.renderScheduledAt < now) {
+                this.renderScheduledAt = now;
                 frame.render(this.render, false, true);
             }
         };
@@ -7214,9 +7178,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.5";
+        this.version = "11.6.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
@@ -3342,14 +3342,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 +3369,7 @@ onEnd) => (onComplete) => {
         onComplete: () => {
             onComplete();
             valueTransition.onComplete && valueTransition.onComplete();
-            onEnd && onEnd();
         },
-        onStop: onEnd,
         name,
         motionValue: value,
         element: isHandoff ? undefined : element,
@@ -3540,42 +3531,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 +3620,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 +3757,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "11.5.5", `Attempting to mix Framer Motion versions ${nextValue.version} with 11.5.5 may not work as expected.`);
+                warnOnce(nextValue.version === "11.6.0", `Attempting to mix Framer Motion versions ${nextValue.version} with 11.6.0 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {
@@ -3957,16 +3924,16 @@ class VisualElement {
         this.propEventSubscriptions = {};
         this.notifyUpdate = () => this.notify("Update", this.latestValues);
         this.render = () => {
-            this.isRenderScheduled = false;
             if (!this.current)
                 return;
             this.triggerBuild();
             this.renderInstance(this.current, this.renderState, this.props.style, this.projection);
         };
-        this.isRenderScheduled = false;
+        this.renderScheduledAt = 0.0;
         this.scheduleRender = () => {
-            if (!this.isRenderScheduled) {
-                this.isRenderScheduled = true;
+            const now = time.now();
+            if (this.renderScheduledAt < now) {
+                this.renderScheduledAt = now;
                 frame.render(this.render, false, true);
             }
         };
@@ -5584,34 +5551,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 +5659,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 +5774,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;