framer-motion 6.3.16 → 6.4.2

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.16";
+        this.version = "6.4.2";
         /**
          * Duration, in milliseconds, since last updating frame.
          *
@@ -5983,7 +5984,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "6.3.16", "Attempting to mix Framer Motion versions ".concat(nextValue.version, " with 6.3.16 may not work as expected."));
+                warnOnce(nextValue.version === "6.4.2", "Attempting to mix Framer Motion versions ".concat(nextValue.version, " with 6.4.2 may not work as expected."));
             }
         }
         else if (isMotionValue(prevValue)) {
@@ -8136,11 +8137,12 @@ function animationControls() {
  *
  * @public
  */
-function useAnimation() {
+function useAnimationControls() {
     var controls = useConstant(animationControls);
     React.useEffect(controls.mount, []);
     return controls;
 }
+var useAnimation = useAnimationControls;
 
 /**
  * Cycles through a series of visual properties. Can be used to toggle between or cycle through animations. It works similar to `useState` in React. It is provided an initial array of possible states, and returns an array of two arguments.
@@ -8185,6 +8187,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.
  *
@@ -8450,6 +8473,7 @@ exports.motionValue = motionValue;
 exports.resolveMotionValue = resolveMotionValue;
 exports.transform = transform;
 exports.useAnimation = useAnimation;
+exports.useAnimationControls = useAnimationControls;
 exports.useAnimationFrame = useAnimationFrame;
 exports.useCycle = useCycle;
 exports.useDeprecatedAnimatedState = useAnimatedState;
@@ -8458,6 +8482,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/animation/use-animation.mjs

@@ -31,10 +31,11 @@ import { useConstant } from '../utils/use-constant.mjs';
  *
  * @public
  */
-function useAnimation() {
+function useAnimationControls() {
     var controls = useConstant(animationControls);
     useEffect(controls.mount, []);
     return controls;
 }
+var useAnimation = useAnimationControls;
 
-export { useAnimation };
+export { useAnimation, useAnimationControls };

package/dist/es/index.mjs

@@ -20,7 +20,7 @@ export { useViewportScroll } from './value/scroll/use-viewport-scroll.mjs';
 export { useTime } from './value/use-time.mjs';
 export { useReducedMotion, useReducedMotionConfig } from './utils/use-reduced-motion.mjs';
 export { animationControls } from './animation/animation-controls.mjs';
-export { useAnimation } from './animation/use-animation.mjs';
+export { useAnimation, useAnimationControls } from './animation/use-animation.mjs';
 export { useAnimationFrame } from './utils/use-animation-frame.mjs';
 export { animate } from './animation/animate.mjs';
 export { animateVisualElement } from './render/utils/animation.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/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.16", "Attempting to mix Framer Motion versions ".concat(nextValue.version, " with 6.3.16 may not work as expected."));
+                warnOnce(nextValue.version === "6.4.2", "Attempting to mix Framer Motion versions ".concat(nextValue.version, " with 6.4.2 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.16";
+        this.version = "6.4.2";
         /**
          * 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.16";
+            this.version = "6.4.2";
             /**
              * Duration, in milliseconds, since last updating frame.
              *
@@ -7217,7 +7217,7 @@
                  * and warn against mismatches.
                  */
                 {
-                    warnOnce(nextValue.version === "6.3.16", "Attempting to mix Framer Motion versions ".concat(nextValue.version, " with 6.3.16 may not work as expected."));
+                    warnOnce(nextValue.version === "6.4.2", "Attempting to mix Framer Motion versions ".concat(nextValue.version, " with 6.4.2 may not work as expected."));
                 }
             }
             else if (isMotionValue(prevValue)) {
@@ -9370,11 +9370,12 @@
      *
      * @public
      */
-    function useAnimation() {
+    function useAnimationControls() {
         var controls = useConstant(animationControls);
         React.useEffect(controls.mount, []);
         return controls;
     }
+    var useAnimation = useAnimationControls;
 
     /**
      * Cycles through a series of visual properties. Can be used to toggle between or cycle through animations. It works similar to `useState` in React. It is provided an initial array of possible states, and returns an array of two arguments.
@@ -9419,6 +9420,111 @@
         return [item, runCycle];
     }
 
+    const noop = () => { };
+
+    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 || []);
+    }
+
+    let supportsDocumentRoot;
+    function getDefaultRoot() {
+        if (supportsDocumentRoot === undefined) {
+            try {
+                new IntersectionObserver(noop, { root: document });
+                supportsDocumentRoot = true;
+            }
+            catch (e) {
+                supportsDocumentRoot = false;
+            }
+        }
+        return supportsDocumentRoot ? document : undefined;
+    }
+    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: root || getDefaultRoot(),
+            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.
      *
@@ -9684,6 +9790,7 @@
     exports.resolveMotionValue = resolveMotionValue;
     exports.transform = transform;
     exports.useAnimation = useAnimation;
+    exports.useAnimationControls = useAnimationControls;
     exports.useAnimationFrame = useAnimationFrame;
     exports.useCycle = useCycle;
     exports.useDeprecatedAnimatedState = useAnimatedState;
@@ -9692,6 +9799,7 @@
     exports.useDragControls = useDragControls;
     exports.useElementScroll = useElementScroll;
     exports.useForceUpdate = useForceUpdate;
+    exports.useInView = useInView;
     exports.useInstantLayoutTransition = useInstantLayoutTransition;
     exports.useInstantTransition = useInstantTransition;
     exports.useIsPresent = useIsPresent;