framer-motion 6.3.14 → 6.4.0

package/dist/cjs/index.js

@@ -8,6 +8,7 @@ var heyListen = require('hey-listen');
 var sync = require('framesync');
 var popmotion = require('popmotion');
 var styleValueTypes = require('style-value-types');
+var dom = require('@motionone/dom');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -472,7 +473,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.3.14";
+        this.version = "6.4.0";
         /**
          * Duration, in milliseconds, since last updating frame.
          *
@@ -1830,7 +1831,7 @@ var globalProjectionState = {
     hasEverUpdated: false,
 };
 function createProjectionNode(_a) {
-    var attachResizeListener = _a.attachResizeListener, defaultParent = _a.defaultParent, measureScroll = _a.measureScroll, resetTransform = _a.resetTransform;
+    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;
@@ -2233,6 +2234,7 @@ function createProjectionNode(_a) {
         };
         ProjectionNode.prototype.updateScroll = function () {
             if (this.options.layoutScroll && this.instance) {
+                this.isScrollRoot = checkIsScrollRoot(this.instance);
                 this.scroll = measureScroll(this.instance);
             }
         };
@@ -2276,8 +2278,24 @@ function createProjectionNode(_a) {
              */
             for (var i = 0; i < this.path.length; i++) {
                 var node = this.path[i];
-                var scroll_1 = node.scroll, options = node.options;
+                var scroll_1 = node.scroll, options = node.options, isScrollRoot = node.isScrollRoot;
                 if (node !== this.root && scroll_1 && options.layoutScroll) {
+                    /**
+                     * If this is a new scroll root, we want to remove all previous scrolls
+                     * from the viewport box.
+                     */
+                    if (isScrollRoot) {
+                        copyBoxInto(boxWithoutScroll, box);
+                        var rootScroll = this.root.scroll;
+                        /**
+                         * Undo the application of page scroll that was originally added
+                         * to the measured bounding box.
+                         */
+                        if (rootScroll) {
+                            translateAxis(boxWithoutScroll.x, -rootScroll.x);
+                            translateAxis(boxWithoutScroll.y, -rootScroll.y);
+                        }
+                    }
                     translateAxis(boxWithoutScroll.x, scroll_1.x);
                     translateAxis(boxWithoutScroll.y, scroll_1.y);
                 }
@@ -5966,7 +5984,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "6.3.14", "Attempting to mix Framer Motion versions ".concat(nextValue.version, " with 6.3.14 may not work as expected."));
+                warnOnce(nextValue.version === "6.4.0", "Attempting to mix Framer Motion versions ".concat(nextValue.version, " with 6.4.0 may not work as expected."));
             }
         }
         else if (isMotionValue(prevValue)) {
@@ -7080,6 +7098,7 @@ var DocumentProjectionNode = createProjectionNode({
         x: document.documentElement.scrollLeft || document.body.scrollLeft,
         y: document.documentElement.scrollTop || document.body.scrollTop,
     }); },
+    checkIsScrollRoot: function () { return true; },
 });
 
 var rootProjectionNode = {
@@ -7102,6 +7121,9 @@ var HTMLProjectionNode = createProjectionNode({
     resetTransform: function (instance, value) {
         instance.style.transform = value !== null && value !== void 0 ? value : "none";
     },
+    checkIsScrollRoot: function (instance) {
+        return Boolean(window.getComputedStyle(instance).position === "fixed");
+    },
 });
 
 var featureBundle = tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign({}, animations), gestureAnimations), drag), layoutFeatures);
@@ -8164,6 +8186,27 @@ function useCycle() {
     return [item, runCycle];
 }
 
+function useInView(ref, _a) {
+    var _b = _a === void 0 ? {} : _a, root = _b.root, margin = _b.margin, amount = _b.amount, _c = _b.once, once = _c === void 0 ? false : _c;
+    var _d = tslib.__read(React.useState(false), 2), isInView = _d[0], setInView = _d[1];
+    React.useEffect(function () {
+        var _a;
+        if (!ref.current || (once && isInView))
+            return;
+        var onEnter = function () {
+            setInView(true);
+            return once ? undefined : function () { return setInView(false); };
+        };
+        var options = {
+            root: (_a = root === null || root === void 0 ? void 0 : root.current) !== null && _a !== void 0 ? _a : undefined,
+            margin: margin,
+            amount: amount === "some" ? "any" : amount,
+        };
+        return dom.inView(ref.current, onEnter, options);
+    }, [root, ref, margin, once]);
+    return isInView;
+}
+
 /**
  * Can manually trigger a drag gesture on one or more `drag`-enabled `motion` components.
  *
@@ -8437,6 +8480,7 @@ exports.useDomEvent = useDomEvent;
 exports.useDragControls = useDragControls;
 exports.useElementScroll = useElementScroll;
 exports.useForceUpdate = useForceUpdate;
+exports.useInView = useInView;
 exports.useInstantLayoutTransition = useInstantLayoutTransition;
 exports.useInstantTransition = useInstantTransition;
 exports.useIsPresent = useIsPresent;

package/dist/es/index.mjs

@@ -28,6 +28,7 @@ export { useCycle } from './utils/use-cycle.mjs';
 export { transform } from './utils/transform.mjs';
 export { isValidMotionProp } from './motion/utils/valid-prop.mjs';
 export { useIsPresent, usePresence } from './components/AnimatePresence/use-presence.mjs';
+export { useInView } from './utils/use-in-view.mjs';
 export { DragControls, useDragControls } from './gestures/drag/use-drag-controls.mjs';
 export { useDomEvent } from './events/use-dom-event.mjs';
 export { createMotionComponent } from './motion/index.mjs';

package/dist/es/projection/node/DocumentProjectionNode.mjs

@@ -7,6 +7,7 @@ var DocumentProjectionNode = createProjectionNode({
         x: document.documentElement.scrollLeft || document.body.scrollLeft,
         y: document.documentElement.scrollTop || document.body.scrollTop,
     }); },
+    checkIsScrollRoot: function () { return true; },
 });
 
 export { DocumentProjectionNode };

package/dist/es/projection/node/HTMLProjectionNode.mjs

@@ -21,6 +21,9 @@ var HTMLProjectionNode = createProjectionNode({
     resetTransform: function (instance, value) {
         instance.style.transform = value !== null && value !== void 0 ? value : "none";
     },
+    checkIsScrollRoot: function (instance) {
+        return Boolean(window.getComputedStyle(instance).position === "fixed");
+    },
 });
 
 export { HTMLProjectionNode, rootProjectionNode };

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

@@ -43,7 +43,7 @@ var globalProjectionState = {
     hasEverUpdated: false,
 };
 function createProjectionNode(_a) {
-    var attachResizeListener = _a.attachResizeListener, defaultParent = _a.defaultParent, measureScroll = _a.measureScroll, resetTransform = _a.resetTransform;
+    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;
@@ -446,6 +446,7 @@ function createProjectionNode(_a) {
         };
         ProjectionNode.prototype.updateScroll = function () {
             if (this.options.layoutScroll && this.instance) {
+                this.isScrollRoot = checkIsScrollRoot(this.instance);
                 this.scroll = measureScroll(this.instance);
             }
         };
@@ -489,8 +490,24 @@ function createProjectionNode(_a) {
              */
             for (var i = 0; i < this.path.length; i++) {
                 var node = this.path[i];
-                var scroll_1 = node.scroll, options = node.options;
+                var scroll_1 = node.scroll, options = node.options, isScrollRoot = node.isScrollRoot;
                 if (node !== this.root && scroll_1 && options.layoutScroll) {
+                    /**
+                     * If this is a new scroll root, we want to remove all previous scrolls
+                     * from the viewport box.
+                     */
+                    if (isScrollRoot) {
+                        copyBoxInto(boxWithoutScroll, box);
+                        var rootScroll = this.root.scroll;
+                        /**
+                         * Undo the application of page scroll that was originally added
+                         * to the measured bounding box.
+                         */
+                        if (rootScroll) {
+                            translateAxis(boxWithoutScroll.x, -rootScroll.x);
+                            translateAxis(boxWithoutScroll.y, -rootScroll.y);
+                        }
+                    }
                     translateAxis(boxWithoutScroll.x, scroll_1.x);
                     translateAxis(boxWithoutScroll.y, scroll_1.y);
                 }

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

package/dist/es/utils/use-in-view.mjs

@@ -0,0 +1,26 @@
+import { __read } from 'tslib';
+import { useState, useEffect } from 'react';
+import { inView } from '@motionone/dom';
+
+function useInView(ref, _a) {
+    var _b = _a === void 0 ? {} : _a, root = _b.root, margin = _b.margin, amount = _b.amount, _c = _b.once, once = _c === void 0 ? false : _c;
+    var _d = __read(useState(false), 2), isInView = _d[0], setInView = _d[1];
+    useEffect(function () {
+        var _a;
+        if (!ref.current || (once && isInView))
+            return;
+        var onEnter = function () {
+            setInView(true);
+            return once ? undefined : function () { return setInView(false); };
+        };
+        var options = {
+            root: (_a = root === null || root === void 0 ? void 0 : root.current) !== null && _a !== void 0 ? _a : undefined,
+            margin: margin,
+            amount: amount === "some" ? "any" : amount,
+        };
+        return inView(ref.current, onEnter, options);
+    }, [root, ref, margin, once]);
+    return isInView;
+}
+
+export { useInView };

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.3.14";
+        this.version = "6.4.0";
         /**
          * Duration, in milliseconds, since last updating frame.
          *

package/dist/framer-motion.dev.js

@@ -1706,7 +1706,7 @@
              * 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.3.14";
+            this.version = "6.4.0";
             /**
              * Duration, in milliseconds, since last updating frame.
              *
@@ -3064,7 +3064,7 @@
         hasEverUpdated: false,
     };
     function createProjectionNode(_a) {
-        var attachResizeListener = _a.attachResizeListener, defaultParent = _a.defaultParent, measureScroll = _a.measureScroll, resetTransform = _a.resetTransform;
+        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;
@@ -3467,6 +3467,7 @@
             };
             ProjectionNode.prototype.updateScroll = function () {
                 if (this.options.layoutScroll && this.instance) {
+                    this.isScrollRoot = checkIsScrollRoot(this.instance);
                     this.scroll = measureScroll(this.instance);
                 }
             };
@@ -3510,8 +3511,24 @@
                  */
                 for (var i = 0; i < this.path.length; i++) {
                     var node = this.path[i];
-                    var scroll_1 = node.scroll, options = node.options;
+                    var scroll_1 = node.scroll, options = node.options, isScrollRoot = node.isScrollRoot;
                     if (node !== this.root && scroll_1 && options.layoutScroll) {
+                        /**
+                         * If this is a new scroll root, we want to remove all previous scrolls
+                         * from the viewport box.
+                         */
+                        if (isScrollRoot) {
+                            copyBoxInto(boxWithoutScroll, box);
+                            var rootScroll = this.root.scroll;
+                            /**
+                             * Undo the application of page scroll that was originally added
+                             * to the measured bounding box.
+                             */
+                            if (rootScroll) {
+                                translateAxis(boxWithoutScroll.x, -rootScroll.x);
+                                translateAxis(boxWithoutScroll.y, -rootScroll.y);
+                            }
+                        }
                         translateAxis(boxWithoutScroll.x, scroll_1.x);
                         translateAxis(boxWithoutScroll.y, scroll_1.y);
                     }
@@ -7200,7 +7217,7 @@
                  * and warn against mismatches.
                  */
                 {
-                    warnOnce(nextValue.version === "6.3.14", "Attempting to mix Framer Motion versions ".concat(nextValue.version, " with 6.3.14 may not work as expected."));
+                    warnOnce(nextValue.version === "6.4.0", "Attempting to mix Framer Motion versions ".concat(nextValue.version, " with 6.4.0 may not work as expected."));
                 }
             }
             else if (isMotionValue(prevValue)) {
@@ -8314,6 +8331,7 @@
             x: document.documentElement.scrollLeft || document.body.scrollLeft,
             y: document.documentElement.scrollTop || document.body.scrollTop,
         }); },
+        checkIsScrollRoot: function () { return true; },
     });
 
     var rootProjectionNode = {
@@ -8336,6 +8354,9 @@
         resetTransform: function (instance, value) {
             instance.style.transform = value !== null && value !== void 0 ? value : "none";
         },
+        checkIsScrollRoot: function (instance) {
+            return Boolean(window.getComputedStyle(instance).position === "fixed");
+        },
     });
 
     var featureBundle = __assign(__assign(__assign(__assign({}, animations), gestureAnimations), drag), layoutFeatures);
@@ -9398,6 +9419,96 @@
         return [item, runCycle];
     }
 
+    function resolveElements(elements, selectorCache) {
+        var _a;
+        if (typeof elements === "string") {
+            if (selectorCache) {
+                (_a = selectorCache[elements]) !== null && _a !== void 0 ? _a : (selectorCache[elements] = document.querySelectorAll(elements));
+                elements = selectorCache[elements];
+            }
+            else {
+                elements = document.querySelectorAll(elements);
+            }
+        }
+        else if (elements instanceof Element) {
+            elements = [elements];
+        }
+        /**
+         * Return an empty array
+         */
+        return Array.from(elements || []);
+    }
+
+    const thresholds = {
+        any: 0,
+        all: 1,
+    };
+    function inView(elements, onStart, { root, margin: rootMargin, amount = "any" } = {}) {
+        /**
+         * If this browser doesn't support IntersectionObserver, return a dummy stop function.
+         * Default triggering of onStart is tricky - it could be used for starting/stopping
+         * videos, lazy loading content etc. We could provide an option to enable a fallback, or
+         * provide a fallback callback option.
+         */
+        if (typeof IntersectionObserver === "undefined") {
+            return () => { };
+        }
+        const resolvedElements = resolveElements(elements);
+        const activeIntersections = new WeakMap();
+        const onIntersectionChange = (entries) => {
+            entries.forEach((entry) => {
+                const onEnd = activeIntersections.get(entry.target);
+                /**
+                 * If there's no change to the intersection, we don't need to
+                 * do anything here.
+                 */
+                if (entry.isIntersecting === Boolean(onEnd))
+                    return;
+                if (entry.isIntersecting) {
+                    const newOnEnd = onStart(entry);
+                    if (typeof newOnEnd === "function") {
+                        activeIntersections.set(entry.target, newOnEnd);
+                    }
+                    else {
+                        observer.unobserve(entry.target);
+                    }
+                }
+                else if (onEnd) {
+                    onEnd(entry);
+                    activeIntersections.delete(entry.target);
+                }
+            });
+        };
+        const observer = new IntersectionObserver(onIntersectionChange, {
+            root,
+            rootMargin,
+            threshold: typeof amount === "number" ? amount : thresholds[amount],
+        });
+        resolvedElements.forEach((element) => observer.observe(element));
+        return () => observer.disconnect();
+    }
+
+    function useInView(ref, _a) {
+        var _b = _a === void 0 ? {} : _a, root = _b.root, margin = _b.margin, amount = _b.amount, _c = _b.once, once = _c === void 0 ? false : _c;
+        var _d = __read(React.useState(false), 2), isInView = _d[0], setInView = _d[1];
+        React.useEffect(function () {
+            var _a;
+            if (!ref.current || (once && isInView))
+                return;
+            var onEnter = function () {
+                setInView(true);
+                return once ? undefined : function () { return setInView(false); };
+            };
+            var options = {
+                root: (_a = root === null || root === void 0 ? void 0 : root.current) !== null && _a !== void 0 ? _a : undefined,
+                margin: margin,
+                amount: amount === "some" ? "any" : amount,
+            };
+            return inView(ref.current, onEnter, options);
+        }, [root, ref, margin, once]);
+        return isInView;
+    }
+
     /**
      * Can manually trigger a drag gesture on one or more `drag`-enabled `motion` components.
      *
@@ -9671,6 +9782,7 @@
     exports.useDragControls = useDragControls;
     exports.useElementScroll = useElementScroll;
     exports.useForceUpdate = useForceUpdate;
+    exports.useInView = useInView;
     exports.useInstantLayoutTransition = useInstantLayoutTransition;
     exports.useInstantTransition = useInstantTransition;
     exports.useIsPresent = useIsPresent;