framer-motion 6.4.3 → 7.0.0

package/README.md

@@ -1,9 +1,9 @@
 <p align="center">
-  <img src="https://user-images.githubusercontent.com/22095598/123793419-f5528800-d8e1-11eb-8c5f-e2dad45a9c81.png" width="108" height="108" alt="Framer Motion" />
+  <img src="https://framerusercontent.com/images/48ha9ZR9oZQGQ6gZ8YUfElP3T0A.png" width="50" height="50" alt="Framer Motion Icon" />
 </p>
 <h1 align="center">Framer Motion</h1>
 <h3 align="center">
-  An open source and production-ready motion<br>library for React on the web.
+  An open source motion library for React, <a href="https://www.framer.com">made by Framer</a>.
 </h3>
 
 <br>
@@ -25,7 +25,7 @@
 
 <br>
 
-Framer Motion is an open source, production-ready library that's designed for all creative developers.
+Framer Motion is an open source, production-ready library that’s designed for all creative developers.
 
 It looks like this:
 
@@ -52,10 +52,14 @@ It does all this:
 
 ### 🐇 Quick start
 
+Install `framer-motion` with via your package manager:
+
 ```
 npm install framer-motion
 ```
 
+Then import the `motion` component:
+
 ```jsx
 import { motion } from "framer-motion"
 
@@ -66,18 +70,17 @@ export const MyComponent = ({ isVisible }) => (
 
 ### 📚 Docs
 
-Check out [our documentation](https://www.framer.com/docs/) for guides and a full API reference.
-
-Or checkout [our examples](https://www.framer.com/docs/examples/) for inspiration.
+- Check out [our documentation](https://www.framer.com/docs/) for guides and a full API reference.
+- Or see [our examples](https://www.framer.com/docs/examples/) for inspiration.
 
-### 🛠 Contribute
+### 💎 Contribute
 
-Want to contribute to Framer Motion? Our [contributing guide](https://github.com/framer/motion/blob/master/CONTRIBUTING.md) has you covered.
+- Want to contribute to Framer Motion? Our [contributing guide](https://github.com/framer/motion/blob/master/CONTRIBUTING.md) has you covered.
 
 ### 👩🏻‍⚖️ License
 
-Framer Motion is MIT licensed.
+- Framer Motion is MIT licensed.
 
-## Framer
+### ✨ Framer
 
-Get on the same page as your designers before production. Get started with [design and prototyping in Framer](https://www.framer.com/).
+- Design and publish sites that inspire. [Try Framer for free](https://www.framer.com/).

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 = "7.0.0";
         /**
          * Duration, in milliseconds, since last updating frame.
          *
@@ -3375,8 +3375,8 @@ var animations = {
  */
 var PanSession = /** @class */ (function () {
     function PanSession(event, handlers, _a) {
-        var _this = this;
         var _b = _a === void 0 ? {} : _a, transformPagePoint = _b.transformPagePoint;
+        var _this = this;
         /**
          * @internal
          */
@@ -4247,7 +4247,7 @@ var VisualElementDragControls = /** @class */ (function () {
          * If the element's layout changes, calculate the delta and apply that to
          * the drag gesture's origin point.
          */
-        projection.addEventListener("didUpdate", (function (_a) {
+        var stopLayoutUpdateListener = projection.addEventListener("didUpdate", (function (_a) {
             var delta = _a.delta, hasLayoutChanged = _a.hasLayoutChanged;
             if (_this.isDragging && hasLayoutChanged) {
                 eachAxis(function (axis) {
@@ -4264,6 +4264,7 @@ var VisualElementDragControls = /** @class */ (function () {
             stopResizeListener();
             stopPointerListener();
             stopMeasureLayoutListener();
+            stopLayoutUpdateListener === null || stopLayoutUpdateListener === void 0 ? void 0 : stopLayoutUpdateListener();
         };
     };
     VisualElementDragControls.prototype.getProps = function () {
@@ -4418,7 +4419,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 === "7.0.0", "Attempting to mix Framer Motion versions ".concat(nextValue.version, " with 7.0.0 may not work as expected."));
             }
         }
         else if (isMotionValue(prevValue)) {
@@ -5257,9 +5258,9 @@ var htmlConfig = {
      * can be animated by Motion.
      */
     makeTargetAnimatable: function (element, _a, _b, isMounted) {
+        var transition = _a.transition, transitionEnd = _a.transitionEnd, target = tslib.__rest(_a, ["transition", "transitionEnd"]);
         var transformValues = _b.transformValues;
         if (isMounted === void 0) { isMounted = true; }
-        var transition = _a.transition, transitionEnd = _a.transitionEnd, target = tslib.__rest(_a, ["transition", "transitionEnd"]);
         var origin = getOrigin(target, transition || {}, element);
         /**
          * If Framer has provided a function to convert `Color` etc value types, convert them
@@ -5919,9 +5920,9 @@ function createProjectionNode(_a) {
     var attachResizeListener = _a.attachResizeListener, defaultParent = _a.defaultParent, measureScroll = _a.measureScroll, checkIsScrollRoot = _a.checkIsScrollRoot, resetTransform = _a.resetTransform;
     return /** @class */ (function () {
         function ProjectionNode(id, latestValues, parent) {
-            var _this = this;
             if (latestValues === void 0) { latestValues = {}; }
             if (parent === void 0) { parent = defaultParent === null || defaultParent === void 0 ? void 0 : defaultParent(); }
+            var _this = this;
             /**
              * A Set containing all this component's children. This is used to iterate
              * through the children.
@@ -7671,13 +7672,13 @@ function transform() {
 }
 
 function useOnChange(value, callback) {
-    React.useEffect(function () {
+    useIsomorphicLayoutEffect(function () {
         if (isMotionValue(value))
             return value.onChange(callback);
     }, [callback]);
 }
 function useMultiOnChange(values, handler) {
-    React.useEffect(function () {
+    useIsomorphicLayoutEffect(function () {
         var subscriptions = values.map(function (value) { return value.onChange(handler); });
         return function () { return subscriptions.forEach(function (unsubscribe) { return unsubscribe(); }); };
     });
@@ -7887,143 +7888,55 @@ 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);
+/**
+ * @deprecated useElementScroll is deprecated. Convert to useScroll({ container: ref })
+ */
+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
+ * @deprecated useViewportScroll is deprecated. Convert to useScroll()
  */
 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"
-    ? function () { return performance.now(); }
-    : function () { return Date.now(); };
 function useAnimationFrame(callback) {
-    var initialTimestamp = useConstant(getCurrentTime);
+    var initialTimestamp = React.useRef(0);
     var isStatic = React.useContext(MotionConfigContext).isStatic;
     React.useEffect(function () {
         if (isStatic)
             return;
         var provideTimeSinceStart = function (_a) {
             var timestamp = _a.timestamp;
-            callback(timestamp - initialTimestamp);
+            if (!initialTimestamp.current)
+                initialTimestamp.current = timestamp;
+            callback(timestamp - initialTimestamp.current);
         };
         sync__default["default"].update(provideTimeSinceStart, true);
         return function () { return sync.cancelSync.update(provideTimeSinceStart); };
@@ -8494,6 +8407,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/context/MotionContext/create.mjs

@@ -1,4 +1,4 @@
-import { useMemo, useContext } from 'react';
+import { useContext, useMemo } from 'react';
 import { MotionContext } from './index.mjs';
 import { getCurrentTreeVariants } from './utils.mjs';
 

package/dist/es/gestures/PanSession.mjs

@@ -11,8 +11,8 @@ import { distance, pipe } from 'popmotion';
  */
 var PanSession = /** @class */ (function () {
     function PanSession(event, handlers, _a) {
-        var _this = this;
         var _b = _a === void 0 ? {} : _a, transformPagePoint = _b.transformPagePoint;
+        var _this = this;
         /**
          * @internal
          */

package/dist/es/gestures/drag/VisualElementDragControls.mjs

@@ -394,7 +394,7 @@ var VisualElementDragControls = /** @class */ (function () {
          * If the element's layout changes, calculate the delta and apply that to
          * the drag gesture's origin point.
          */
-        projection.addEventListener("didUpdate", (function (_a) {
+        var stopLayoutUpdateListener = projection.addEventListener("didUpdate", (function (_a) {
             var delta = _a.delta, hasLayoutChanged = _a.hasLayoutChanged;
             if (_this.isDragging && hasLayoutChanged) {
                 eachAxis(function (axis) {
@@ -411,6 +411,7 @@ var VisualElementDragControls = /** @class */ (function () {
             stopResizeListener();
             stopPointerListener();
             stopMeasureLayoutListener();
+            stopLayoutUpdateListener === null || stopLayoutUpdateListener === void 0 ? void 0 : stopLayoutUpdateListener();
         };
     };
     VisualElementDragControls.prototype.getProps = function () {

package/dist/es/gestures/drag/utils/constraints.mjs

@@ -1,5 +1,5 @@
 import { __read } from 'tslib';
-import { clamp, mix, progress } from 'popmotion';
+import { mix, progress, clamp } from 'popmotion';
 import { calcLength } from '../../../projection/geometry/delta-calc.mjs';
 
 /**

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/projection/animation/mix-values.mjs

@@ -1,5 +1,5 @@
-import { mix, progress, linear, circOut } from 'popmotion';
-import { px, percent } from 'style-value-types';
+import { mix, progress, circOut, linear } from 'popmotion';
+import { percent, px } from 'style-value-types';
 
 var borders = ["TopLeft", "TopRight", "BottomLeft", "BottomRight"];
 var numBorders = borders.length;

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

@@ -30,9 +30,9 @@ function createProjectionNode(_a) {
     var attachResizeListener = _a.attachResizeListener, defaultParent = _a.defaultParent, measureScroll = _a.measureScroll, checkIsScrollRoot = _a.checkIsScrollRoot, resetTransform = _a.resetTransform;
     return /** @class */ (function () {
         function ProjectionNode(id, latestValues, parent) {
-            var _this = this;
             if (latestValues === void 0) { latestValues = {}; }
             if (parent === void 0) { parent = defaultParent === null || defaultParent === void 0 ? void 0 : defaultParent(); }
+            var _this = this;
             /**
              * A Set containing all this component's children. This is used to iterate
              * through the children.

package/dist/es/render/dom/utils/unit-conversion.mjs

@@ -1,5 +1,5 @@
 import { __assign, __read } from 'tslib';
-import { number, px } from 'style-value-types';
+import { px, number } from 'style-value-types';
 import { isKeyframesTarget } from '../../../animation/utils/is-keyframes-target.mjs';
 import { invariant } from 'hey-listen';
 import { transformProps } from '../../html/utils/transform.mjs';

package/dist/es/render/html/visual-element.mjs

@@ -71,9 +71,9 @@ var htmlConfig = {
      * can be animated by Motion.
      */
     makeTargetAnimatable: function (element, _a, _b, isMounted) {
+        var transition = _a.transition, transitionEnd = _a.transitionEnd, target = __rest(_a, ["transition", "transitionEnd"]);
         var transformValues = _b.transformValues;
         if (isMounted === void 0) { isMounted = true; }
-        var transition = _a.transition, transitionEnd = _a.transitionEnd, target = __rest(_a, ["transition", "transitionEnd"]);
         var origin = getOrigin(target, transition || {}, element);
         /**
          * If Framer has provided a function to convert `Color` etc value types, convert them

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 === "7.0.0", "Attempting to mix Framer Motion versions ".concat(nextValue.version, " with 7.0.0 may not work as expected."));
             }
         }
         else if (isMotionValue(prevValue)) {

package/dist/es/utils/use-animation-frame.mjs

@@ -1,20 +1,18 @@
 import sync, { cancelSync } from 'framesync';
-import { useContext, useEffect } from 'react';
-import { useConstant } from './use-constant.mjs';
+import { useRef, useContext, useEffect } from 'react';
 import { MotionConfigContext } from '../context/MotionConfigContext.mjs';
 
-var getCurrentTime = typeof performance !== "undefined"
-    ? function () { return performance.now(); }
-    : function () { return Date.now(); };
 function useAnimationFrame(callback) {
-    var initialTimestamp = useConstant(getCurrentTime);
+    var initialTimestamp = useRef(0);
     var isStatic = useContext(MotionConfigContext).isStatic;
     useEffect(function () {
         if (isStatic)
             return;
         var provideTimeSinceStart = function (_a) {
             var timestamp = _a.timestamp;
-            callback(timestamp - initialTimestamp);
+            if (!initialTimestamp.current)
+                initialTimestamp.current = timestamp;
+            callback(timestamp - initialTimestamp.current);
         };
         sync.update(provideTimeSinceStart, true);
         return function () { return cancelSync.update(provideTimeSinceStart); };

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 = "7.0.0";
         /**
          * Duration, in milliseconds, since last updating frame.
          *

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

@@ -1,58 +1,12 @@
-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
+ * @deprecated useElementScroll is deprecated. Convert to useScroll({ container: ref })
  */
 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,12 @@
-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
+ * @deprecated useViewportScroll is deprecated. Convert to useScroll()
  */
 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-on-change.mjs

@@ -1,14 +1,14 @@
-import { useEffect } from 'react';
 import { isMotionValue } from './utils/is-motion-value.mjs';
+import { useIsomorphicLayoutEffect } from '../utils/use-isomorphic-effect.mjs';
 
 function useOnChange(value, callback) {
-    useEffect(function () {
+    useIsomorphicLayoutEffect(function () {
         if (isMotionValue(value))
             return value.onChange(callback);
     }, [callback]);
 }
 function useMultiOnChange(values, handler) {
-    useEffect(function () {
+    useIsomorphicLayoutEffect(function () {
         var subscriptions = values.map(function (value) { return value.onChange(handler); });
         return function () { return subscriptions.forEach(function (unsubscribe) { return unsubscribe(); }); };
     });

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 };