framer-motion 6.4.3 → 6.5.0

package/dist/cjs/index.js

@@ -2449,7 +2449,7 @@ var MotionValue = /** @class */ (function () {
          * 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 = "6.4.3";
+        this.version = "6.5.0";
         /**
          * Duration, in milliseconds, since last updating frame.
          *
@@ -4418,7 +4418,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "6.4.3", "Attempting to mix Framer Motion versions ".concat(nextValue.version, " with 6.4.3 may not work as expected."));
+                warnOnce(nextValue.version === "6.5.0", "Attempting to mix Framer Motion versions ".concat(nextValue.version, " with 6.5.0 may not work as expected."));
             }
         }
         else if (isMotionValue(prevValue)) {
@@ -7887,129 +7887,36 @@ function useVelocity(value) {
     return velocity;
 }
 
-function createScrollMotionValues() {
-    return {
-        scrollX: motionValue(0),
-        scrollY: motionValue(0),
-        scrollXProgress: motionValue(0),
-        scrollYProgress: motionValue(0),
-    };
-}
-function setProgress(offset, maxOffset, value) {
-    value.set(!offset || !maxOffset ? 0 : offset / maxOffset);
-}
-function createScrollUpdater(values, getOffsets) {
-    var update = function () {
-        var _a = getOffsets(), xOffset = _a.xOffset, yOffset = _a.yOffset, xMaxOffset = _a.xMaxOffset, yMaxOffset = _a.yMaxOffset;
-        // Set absolute positions
-        values.scrollX.set(xOffset);
-        values.scrollY.set(yOffset);
-        // Set 0-1 progress
-        setProgress(xOffset, xMaxOffset, values.scrollXProgress);
-        setProgress(yOffset, yMaxOffset, values.scrollYProgress);
-    };
-    update();
-    return update;
-}
-
-var getElementScrollOffsets = function (element) { return function () {
-    return {
-        xOffset: element.scrollLeft,
-        yOffset: element.scrollTop,
-        xMaxOffset: element.scrollWidth - element.offsetWidth,
-        yMaxOffset: element.scrollHeight - element.offsetHeight,
-    };
-}; };
-/**
- * Returns MotionValues that update when the provided element scrolls:
- *
- * - `scrollX` — Horizontal scroll distance in pixels.
- * - `scrollY` — Vertical scroll distance in pixels.
- * - `scrollXProgress` — Horizontal scroll progress between `0` and `1`.
- * - `scrollYProgress` — Vertical scroll progress between `0` and `1`.
- *
- * This element must be set to `overflow: scroll` on either or both axes to report scroll offset.
- *
- * ```jsx
- * export const MyComponent = () => {
- *   const ref = useRef()
- *   const { scrollYProgress } = useElementScroll(ref)
- *
- *   return (
- *     <div ref={ref}>
- *       <motion.div style={{ scaleX: scrollYProgress }} />
- *     </div>
- *   )
- * }
- * ```
- *
- * @public
- */
-function useElementScroll(ref) {
+var createScrollMotionValues = function () { return ({
+    scrollX: motionValue(0),
+    scrollY: motionValue(0),
+    scrollXProgress: motionValue(0),
+    scrollYProgress: motionValue(0),
+}); };
+function useScroll(_a) {
+    if (_a === void 0) { _a = {}; }
+    var container = _a.container, target = _a.target, options = tslib.__rest(_a, ["container", "target"]);
     var values = useConstant(createScrollMotionValues);
     useIsomorphicLayoutEffect(function () {
-        var element = ref.current;
-        heyListen.invariant(!!element, "ref provided to useScroll must be passed into a HTML element.");
-        if (!element)
-            return;
-        var updateScrollValues = createScrollUpdater(values, getElementScrollOffsets(element));
-        var scrollListener = addDomEvent(element, "scroll", updateScrollValues);
-        var resizeListener = addDomEvent(element, "resize", updateScrollValues);
-        return function () {
-            scrollListener && scrollListener();
-            resizeListener && resizeListener();
-        };
+        return dom.scroll(function (_a) {
+            var x = _a.x, y = _a.y;
+            values.scrollX.set(x.current);
+            values.scrollXProgress.set(x.progress);
+            values.scrollY.set(y.current);
+            values.scrollYProgress.set(y.progress);
+        }, tslib.__assign(tslib.__assign({}, options), { container: (container === null || container === void 0 ? void 0 : container.current) || undefined, target: (target === null || target === void 0 ? void 0 : target.current) || undefined }));
     }, []);
     return values;
 }
 
-var viewportScrollValues;
-function getViewportScrollOffsets() {
-    return {
-        xOffset: window.pageXOffset,
-        yOffset: window.pageYOffset,
-        xMaxOffset: document.body.clientWidth - window.innerWidth,
-        yMaxOffset: document.body.clientHeight - window.innerHeight,
-    };
-}
-var hasListeners = false;
-function addEventListeners() {
-    hasListeners = true;
-    var updateScrollValues = createScrollUpdater(viewportScrollValues, getViewportScrollOffsets);
-    addDomEvent(window, "scroll", updateScrollValues);
-    addDomEvent(window, "resize", updateScrollValues);
+function useElementScroll(ref) {
+    warnOnce(false, "useElementScroll is deprecated. Convert to useScroll({ container: ref }).");
+    return useScroll({ container: ref });
 }
-/**
- * Returns MotionValues that update when the viewport scrolls:
- *
- * - `scrollX` — Horizontal scroll distance in pixels.
- * - `scrollY` — Vertical scroll distance in pixels.
- * - `scrollXProgress` — Horizontal scroll progress between `0` and `1`.
- * - `scrollYProgress` — Vertical scroll progress between `0` and `1`.
- *
- * **Warning:** Setting `body` or `html` to `height: 100%` or similar will break the `Progress`
- * values as this breaks the browser's capability to accurately measure the page length.
- *
- * ```jsx
- * export const MyComponent = () => {
- *   const { scrollYProgress } = useViewportScroll()
- *   return <motion.div style={{ scaleX: scrollYProgress }} />
- * }
- * ```
- *
- * @public
- */
+
 function useViewportScroll() {
-    /**
-     * Lazy-initialise the viewport scroll values
-     */
-    if (!viewportScrollValues) {
-        viewportScrollValues = createScrollMotionValues();
-    }
-    useIsomorphicLayoutEffect(function () {
-        !hasListeners && addEventListeners();
-    }, []);
-    return viewportScrollValues;
+    warnOnce(false, "useViewportScroll is deprecated. Convert to useScroll().");
+    return useScroll();
 }
 
 var getCurrentTime = typeof performance !== "undefined"
@@ -8494,6 +8401,7 @@ exports.usePresence = usePresence;
 exports.useReducedMotion = useReducedMotion;
 exports.useReducedMotionConfig = useReducedMotionConfig;
 exports.useResetProjection = useResetProjection;
+exports.useScroll = useScroll;
 exports.useSpring = useSpring;
 exports.useTime = useTime;
 exports.useTransform = useTransform;

package/dist/es/index.mjs

@@ -15,6 +15,7 @@ export { resolveMotionValue } from './value/utils/resolve-motion-value.mjs';
 export { useTransform } from './value/use-transform.mjs';
 export { useSpring } from './value/use-spring.mjs';
 export { useVelocity } from './value/use-velocity.mjs';
+export { useScroll } from './value/use-scroll.mjs';
 export { useElementScroll } from './value/scroll/use-element-scroll.mjs';
 export { useViewportScroll } from './value/scroll/use-viewport-scroll.mjs';
 export { useTime } from './value/use-time.mjs';

package/dist/es/render/utils/motion-values.mjs

@@ -18,7 +18,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "6.4.3", "Attempting to mix Framer Motion versions ".concat(nextValue.version, " with 6.4.3 may not work as expected."));
+                warnOnce(nextValue.version === "6.5.0", "Attempting to mix Framer Motion versions ".concat(nextValue.version, " with 6.5.0 may not work as expected."));
             }
         }
         else if (isMotionValue(prevValue)) {

package/dist/es/value/index.mjs

@@ -25,7 +25,7 @@ var MotionValue = /** @class */ (function () {
          * 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 = "6.4.3";
+        this.version = "6.5.0";
         /**
          * Duration, in milliseconds, since last updating frame.
          *

package/dist/es/value/scroll/use-element-scroll.mjs

@@ -1,58 +1,9 @@
-import { useConstant } from '../../utils/use-constant.mjs';
-import { createScrollUpdater, createScrollMotionValues } from './utils.mjs';
-import { addDomEvent } from '../../events/use-dom-event.mjs';
-import { useIsomorphicLayoutEffect } from '../../utils/use-isomorphic-effect.mjs';
-import { invariant } from 'hey-listen';
+import { warnOnce } from '../../utils/warn-once.mjs';
+import { useScroll } from '../use-scroll.mjs';
 
-var getElementScrollOffsets = function (element) { return function () {
-    return {
-        xOffset: element.scrollLeft,
-        yOffset: element.scrollTop,
-        xMaxOffset: element.scrollWidth - element.offsetWidth,
-        yMaxOffset: element.scrollHeight - element.offsetHeight,
-    };
-}; };
-/**
- * Returns MotionValues that update when the provided element scrolls:
- *
- * - `scrollX` — Horizontal scroll distance in pixels.
- * - `scrollY` — Vertical scroll distance in pixels.
- * - `scrollXProgress` — Horizontal scroll progress between `0` and `1`.
- * - `scrollYProgress` — Vertical scroll progress between `0` and `1`.
- *
- * This element must be set to `overflow: scroll` on either or both axes to report scroll offset.
- *
- * ```jsx
- * export const MyComponent = () => {
- *   const ref = useRef()
- *   const { scrollYProgress } = useElementScroll(ref)
- *
- *   return (
- *     <div ref={ref}>
- *       <motion.div style={{ scaleX: scrollYProgress }} />
- *     </div>
- *   )
- * }
- * ```
- *
- * @public
- */
 function useElementScroll(ref) {
-    var values = useConstant(createScrollMotionValues);
-    useIsomorphicLayoutEffect(function () {
-        var element = ref.current;
-        invariant(!!element, "ref provided to useScroll must be passed into a HTML element.");
-        if (!element)
-            return;
-        var updateScrollValues = createScrollUpdater(values, getElementScrollOffsets(element));
-        var scrollListener = addDomEvent(element, "scroll", updateScrollValues);
-        var resizeListener = addDomEvent(element, "resize", updateScrollValues);
-        return function () {
-            scrollListener && scrollListener();
-            resizeListener && resizeListener();
-        };
-    }, []);
-    return values;
+    warnOnce(false, "useElementScroll is deprecated. Convert to useScroll({ container: ref }).");
+    return useScroll({ container: ref });
 }
 
 export { useElementScroll };

package/dist/es/value/scroll/use-viewport-scroll.mjs

@@ -1,54 +1,9 @@
-import { createScrollMotionValues, createScrollUpdater } from './utils.mjs';
-import { addDomEvent } from '../../events/use-dom-event.mjs';
-import { useIsomorphicLayoutEffect } from '../../utils/use-isomorphic-effect.mjs';
+import { warnOnce } from '../../utils/warn-once.mjs';
+import { useScroll } from '../use-scroll.mjs';
 
-var viewportScrollValues;
-function getViewportScrollOffsets() {
-    return {
-        xOffset: window.pageXOffset,
-        yOffset: window.pageYOffset,
-        xMaxOffset: document.body.clientWidth - window.innerWidth,
-        yMaxOffset: document.body.clientHeight - window.innerHeight,
-    };
-}
-var hasListeners = false;
-function addEventListeners() {
-    hasListeners = true;
-    var updateScrollValues = createScrollUpdater(viewportScrollValues, getViewportScrollOffsets);
-    addDomEvent(window, "scroll", updateScrollValues);
-    addDomEvent(window, "resize", updateScrollValues);
-}
-/**
- * Returns MotionValues that update when the viewport scrolls:
- *
- * - `scrollX` — Horizontal scroll distance in pixels.
- * - `scrollY` — Vertical scroll distance in pixels.
- * - `scrollXProgress` — Horizontal scroll progress between `0` and `1`.
- * - `scrollYProgress` — Vertical scroll progress between `0` and `1`.
- *
- * **Warning:** Setting `body` or `html` to `height: 100%` or similar will break the `Progress`
- * values as this breaks the browser's capability to accurately measure the page length.
- *
- * ```jsx
- * export const MyComponent = () => {
- *   const { scrollYProgress } = useViewportScroll()
- *   return <motion.div style={{ scaleX: scrollYProgress }} />
- * }
- * ```
- *
- * @public
- */
 function useViewportScroll() {
-    /**
-     * Lazy-initialise the viewport scroll values
-     */
-    if (!viewportScrollValues) {
-        viewportScrollValues = createScrollMotionValues();
-    }
-    useIsomorphicLayoutEffect(function () {
-        !hasListeners && addEventListeners();
-    }, []);
-    return viewportScrollValues;
+    warnOnce(false, "useViewportScroll is deprecated. Convert to useScroll().");
+    return useScroll();
 }
 
 export { useViewportScroll };

package/dist/es/value/use-scroll.mjs

@@ -0,0 +1,29 @@
+import { __rest, __assign } from 'tslib';
+import { scroll } from '@motionone/dom';
+import { motionValue } from './index.mjs';
+import { useConstant } from '../utils/use-constant.mjs';
+import { useIsomorphicLayoutEffect } from '../utils/use-isomorphic-effect.mjs';
+
+var createScrollMotionValues = function () { return ({
+    scrollX: motionValue(0),
+    scrollY: motionValue(0),
+    scrollXProgress: motionValue(0),
+    scrollYProgress: motionValue(0),
+}); };
+function useScroll(_a) {
+    if (_a === void 0) { _a = {}; }
+    var container = _a.container, target = _a.target, options = __rest(_a, ["container", "target"]);
+    var values = useConstant(createScrollMotionValues);
+    useIsomorphicLayoutEffect(function () {
+        return scroll(function (_a) {
+            var x = _a.x, y = _a.y;
+            values.scrollX.set(x.current);
+            values.scrollXProgress.set(x.progress);
+            values.scrollY.set(y.current);
+            values.scrollYProgress.set(y.progress);
+        }, __assign(__assign({}, options), { container: (container === null || container === void 0 ? void 0 : container.current) || undefined, target: (target === null || target === void 0 ? void 0 : target.current) || undefined }));
+    }, []);
+    return values;
+}
+
+export { useScroll };