framer-motion 5.1.0 → 5.3.0

package/dist/es/motion/features/definitions.mjs

@@ -11,6 +11,7 @@ var featureDefinitions = {
         "whileTap",
         "whileFocus",
         "whileDrag",
+        "whileInView",
     ]),
     exit: createDefinition(["exit"]),
     drag: createDefinition(["drag", "dragControls"]),
@@ -23,6 +24,11 @@ var featureDefinitions = {
         "onPanSessionStart",
         "onPanEnd",
     ]),
+    inView: createDefinition([
+        "whileInView",
+        "onViewportEnter",
+        "onViewportLeave",
+    ]),
 };
 function loadFeatures(features) {
     for (var key in features) {

package/dist/es/motion/features/gestures.mjs

@@ -1,9 +1,11 @@
 import { useFocusGesture } from '../../gestures/use-focus-gesture.mjs';
 import { useHoverGesture } from '../../gestures/use-hover-gesture.mjs';
 import { useTapGesture } from '../../gestures/use-tap-gesture.mjs';
+import { useViewport } from './viewport/use-viewport.mjs';
 import { makeRenderlessComponent } from '../utils/make-renderless-component.mjs';
 
 var gestureAnimations = {
+    inView: makeRenderlessComponent(useViewport),
     tap: makeRenderlessComponent(useTapGesture),
     focus: makeRenderlessComponent(useFocusGesture),
     hover: makeRenderlessComponent(useHoverGesture),

package/dist/es/motion/features/viewport/observers.mjs

@@ -0,0 +1,52 @@
+import { __rest, __assign } from 'tslib';
+
+/**
+ * Map an IntersectionHandler callback to an element. We only ever make one handler for one
+ * element, so even though these handlers might all be triggered by different
+ * observers, we can keep them in the same map.
+ */
+var observerCallbacks = new WeakMap();
+/**
+ * Multiple observers can be created for multiple element/document roots. Each with
+ * different settings. So here we store dictionaries of observers to each root,
+ * using serialised settings (threshold/margin) as lookup keys.
+ */
+var observers = new WeakMap();
+var fireObserverCallback = function (entry) {
+    var _a;
+    (_a = observerCallbacks.get(entry.target)) === null || _a === void 0 ? void 0 : _a(entry);
+};
+var fireAllObserverCallbacks = function (entries) {
+    entries.forEach(fireObserverCallback);
+};
+function initIntersectionObserver(_a) {
+    var root = _a.root, options = __rest(_a, ["root"]);
+    var lookupRoot = root || document;
+    /**
+     * If we don't have an observer lookup map for this root, create one.
+     */
+    if (!observers.has(lookupRoot)) {
+        observers.set(lookupRoot, {});
+    }
+    var rootObservers = observers.get(lookupRoot);
+    var key = JSON.stringify(options);
+    /**
+     * If we don't have an observer for this combination of root and settings,
+     * create one.
+     */
+    if (!rootObservers[key]) {
+        rootObservers[key] = new IntersectionObserver(fireAllObserverCallbacks, __assign({ root: root }, options));
+    }
+    return rootObservers[key];
+}
+function observeIntersection(element, options, callback) {
+    var rootInteresectionObserver = initIntersectionObserver(options);
+    observerCallbacks.set(element, callback);
+    rootInteresectionObserver.observe(element);
+    return function () {
+        observerCallbacks.delete(element);
+        rootInteresectionObserver.unobserve(element);
+    };
+}
+
+export { observeIntersection };

package/dist/es/motion/features/viewport/use-viewport.mjs

@@ -0,0 +1,97 @@
+import { useRef, useEffect } from 'react';
+import { AnimationType } from '../../../render/utils/types.mjs';
+import { warnOnce } from '../../../utils/warn-once.mjs';
+import { observeIntersection } from './observers.mjs';
+
+function useViewport(_a) {
+    var visualElement = _a.visualElement, whileInView = _a.whileInView, onViewportEnter = _a.onViewportEnter, onViewportLeave = _a.onViewportLeave, _b = _a.viewport, viewport = _b === void 0 ? {} : _b;
+    var state = useRef({
+        hasEnteredView: false,
+        isInView: false,
+    });
+    var shouldObserve = Boolean(whileInView || onViewportEnter || onViewportLeave);
+    if (viewport.once && state.current.hasEnteredView)
+        shouldObserve = false;
+    var useObserver = typeof IntersectionObserver === "undefined"
+        ? useMissingIntersectionObserver
+        : useIntersectionObserver;
+    useObserver(shouldObserve, state.current, visualElement, viewport);
+}
+var thresholdNames = {
+    some: 0,
+    all: 1,
+};
+function useIntersectionObserver(shouldObserve, state, visualElement, _a) {
+    var root = _a.root, rootMargin = _a.margin, _b = _a.amount, amount = _b === void 0 ? "some" : _b, once = _a.once;
+    useEffect(function () {
+        if (!shouldObserve)
+            return;
+        var options = {
+            root: root === null || root === void 0 ? void 0 : root.current,
+            rootMargin: rootMargin,
+            threshold: typeof amount === "number" ? amount : thresholdNames[amount],
+        };
+        var intersectionCallback = function (entry) {
+            var _a;
+            var isIntersecting = entry.isIntersecting;
+            /**
+             * If there's been no change in the viewport state, early return.
+             */
+            if (state.isInView === isIntersecting)
+                return;
+            state.isInView = isIntersecting;
+            /**
+             * Handle hasEnteredView. If this is only meant to run once, and
+             * element isn't visible, early return. Otherwise set hasEnteredView to true.
+             */
+            if (once && !isIntersecting && state.hasEnteredView) {
+                return;
+            }
+            else if (isIntersecting) {
+                state.hasEnteredView = true;
+            }
+            (_a = visualElement.animationState) === null || _a === void 0 ? void 0 : _a.setActive(AnimationType.InView, isIntersecting);
+            /**
+             * Use the latest committed props rather than the ones in scope
+             * when this observer is created
+             */
+            var props = visualElement.getProps();
+            var callback = isIntersecting
+                ? props.onViewportEnter
+                : props.onViewportLeave;
+            callback === null || callback === void 0 ? void 0 : callback();
+        };
+        return observeIntersection(visualElement.getInstance(), options, intersectionCallback);
+    }, [shouldObserve, root, rootMargin, amount]);
+}
+/**
+ * If IntersectionObserver is missing, we activate inView and fire onViewportEnter
+ * on mount. This way, the page will be in the state the author expects users
+ * to see it in for everyone.
+ */
+function useMissingIntersectionObserver(shouldObserve, state, visualElement) {
+    useEffect(function () {
+        if (!shouldObserve)
+            return;
+        if (process.env.NODE_ENV !== "production") {
+            warnOnce(false, "IntersectionObserver not available on this device. whileInView animations will trigger on mount.");
+        }
+        /**
+         * Fire this in an rAF because, at this point, the animation state
+         * won't have flushed for the first time and there's certain logic in
+         * there that behaves differently on the initial animation.
+         *
+         * This hook should be quite rarely called so setting this in an rAF
+         * is preferred to changing the behaviour of the animation state.
+         */
+        requestAnimationFrame(function () {
+            var _a;
+            state.hasEnteredView = true;
+            var onViewportEnter = visualElement.getProps().onViewportEnter;
+            onViewportEnter === null || onViewportEnter === void 0 ? void 0 : onViewportEnter();
+            (_a = visualElement.animationState) === null || _a === void 0 ? void 0 : _a.setActive(AnimationType.InView, true);
+        });
+    }, [shouldObserve]);
+}
+
+export { useViewport };

package/dist/es/motion/utils/valid-prop.mjs

@@ -54,6 +54,10 @@ var validMotionProps = new Set([
     "whileFocus",
     "whileTap",
     "whileHover",
+    "whileInView",
+    "onViewportEnter",
+    "onViewportLeave",
+    "viewport",
     "layoutScroll",
 ]);
 /**

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

@@ -307,7 +307,7 @@ function createProjectionNode(_a) {
                 node.updateScroll();
             }
             var _d = this.options, layoutId = _d.layoutId, layout = _d.layout;
-            if (!layoutId && !layout)
+            if (layoutId === undefined && !layout)
                 return;
             var transformTemplate = (_c = this.options.visualElement) === null || _c === void 0 ? void 0 : _c.getProps().transformTemplate;
             this.prevTransformTemplateValue = transformTemplate === null || transformTemplate === void 0 ? void 0 : transformTemplate(this.latestValues, "");

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

@@ -115,11 +115,18 @@ var convertChangedValueTypes = function (target, visualElement, changedKeys) {
     var element = visualElement.getInstance();
     var elementComputedStyle = getComputedStyle(element);
     var display = elementComputedStyle.display;
+    var origin = {};
     // If the element is currently set to display: "none", make it visible before
     // measuring the target bounding box
     if (display === "none") {
         visualElement.setStaticValue("display", target.display || "block");
     }
+    /**
+     * Record origins before we render and update styles
+     */
+    changedKeys.forEach(function (key) {
+        origin[key] = positionalValues[key](originBbox, elementComputedStyle);
+    });
     // Apply the latest values (as set in checkAndConvertChangedValueTypes)
     visualElement.syncRender();
     var targetBbox = visualElement.measureViewportBox();
@@ -127,7 +134,7 @@ var convertChangedValueTypes = function (target, visualElement, changedKeys) {
         // Restore styles to their **calculated computed style**, not their actual
         // originally set style. This allows us to animate between equivalent pixel units.
         var value = visualElement.getValue(key);
-        setAndResetVelocity(value, positionalValues[key](originBbox, elementComputedStyle));
+        setAndResetVelocity(value, origin[key]);
         target[key] = positionalValues[key](targetBbox, elementComputedStyle);
     });
     return target;

package/dist/es/render/utils/animation-state.mjs

@@ -8,6 +8,7 @@ import { isVariantLabels, resolveVariant, isVariantLabel } from './variants.mjs'
 
 var variantPriorityOrder = [
     AnimationType.Animate,
+    AnimationType.InView,
     AnimationType.Focus,
     AnimationType.Hover,
     AnimationType.Tap,
@@ -324,6 +325,7 @@ function createState() {
     var _a;
     return _a = {},
         _a[AnimationType.Animate] = createTypeState(true),
+        _a[AnimationType.InView] = createTypeState(),
         _a[AnimationType.Hover] = createTypeState(),
         _a[AnimationType.Tap] = createTypeState(),
         _a[AnimationType.Drag] = createTypeState(),

package/dist/es/render/utils/types.mjs

@@ -5,6 +5,7 @@ var AnimationType;
     AnimationType["Tap"] = "whileTap";
     AnimationType["Drag"] = "whileDrag";
     AnimationType["Focus"] = "whileFocus";
+    AnimationType["InView"] = "whileInView";
     AnimationType["Exit"] = "exit";
 })(AnimationType || (AnimationType = {}));
 

package/dist/es/utils/warn-once.mjs

@@ -0,0 +1,11 @@
+var warned = new Set();
+function warnOnce(condition, message, element) {
+    if (condition || warned.has(message))
+        return;
+    console.warn(message);
+    if (element)
+        console.warn(element);
+    warned.add(message);
+}
+
+export { warnOnce };

package/dist/framer-motion.cjs.js

@@ -48,6 +48,7 @@ var featureDefinitions = {
         "whileTap",
         "whileFocus",
         "whileDrag",
+        "whileInView",
     ]),
     exit: createDefinition(["exit"]),
     drag: createDefinition(["drag", "dragControls"]),
@@ -60,6 +61,11 @@ var featureDefinitions = {
         "onPanSessionStart",
         "onPanEnd",
     ]),
+    inView: createDefinition([
+        "whileInView",
+        "onViewportEnter",
+        "onViewportLeave",
+    ]),
 };
 function loadFeatures(features) {
     for (var key in features) {
@@ -1988,7 +1994,7 @@ function createProjectionNode(_a) {
                 node.updateScroll();
             }
             var _d = this.options, layoutId = _d.layoutId, layout = _d.layout;
-            if (!layoutId && !layout)
+            if (layoutId === undefined && !layout)
                 return;
             var transformTemplate = (_c = this.options.visualElement) === null || _c === void 0 ? void 0 : _c.getProps().transformTemplate;
             this.prevTransformTemplateValue = transformTemplate === null || transformTemplate === void 0 ? void 0 : transformTemplate(this.latestValues, "");
@@ -3368,6 +3374,10 @@ var validMotionProps = new Set([
     "whileFocus",
     "whileTap",
     "whileHover",
+    "whileInView",
+    "onViewportEnter",
+    "onViewportLeave",
+    "viewport",
     "layoutScroll",
 ]);
 /**
@@ -3722,6 +3732,7 @@ var AnimationType;
     AnimationType["Tap"] = "whileTap";
     AnimationType["Drag"] = "whileDrag";
     AnimationType["Focus"] = "whileFocus";
+    AnimationType["InView"] = "whileInView";
     AnimationType["Exit"] = "exit";
 })(AnimationType || (AnimationType = {}));
 
@@ -4031,12 +4042,163 @@ function useTapGesture(_a) {
     useUnmountEffect(removePointerEndListener);
 }
 
+var warned = new Set();
+function warnOnce(condition, message, element) {
+    if (condition || warned.has(message))
+        return;
+    console.warn(message);
+    if (element)
+        console.warn(element);
+    warned.add(message);
+}
+
+/**
+ * Map an IntersectionHandler callback to an element. We only ever make one handler for one
+ * element, so even though these handlers might all be triggered by different
+ * observers, we can keep them in the same map.
+ */
+var observerCallbacks = new WeakMap();
+/**
+ * Multiple observers can be created for multiple element/document roots. Each with
+ * different settings. So here we store dictionaries of observers to each root,
+ * using serialised settings (threshold/margin) as lookup keys.
+ */
+var observers = new WeakMap();
+var fireObserverCallback = function (entry) {
+    var _a;
+    (_a = observerCallbacks.get(entry.target)) === null || _a === void 0 ? void 0 : _a(entry);
+};
+var fireAllObserverCallbacks = function (entries) {
+    entries.forEach(fireObserverCallback);
+};
+function initIntersectionObserver(_a) {
+    var root = _a.root, options = tslib.__rest(_a, ["root"]);
+    var lookupRoot = root || document;
+    /**
+     * If we don't have an observer lookup map for this root, create one.
+     */
+    if (!observers.has(lookupRoot)) {
+        observers.set(lookupRoot, {});
+    }
+    var rootObservers = observers.get(lookupRoot);
+    var key = JSON.stringify(options);
+    /**
+     * If we don't have an observer for this combination of root and settings,
+     * create one.
+     */
+    if (!rootObservers[key]) {
+        rootObservers[key] = new IntersectionObserver(fireAllObserverCallbacks, tslib.__assign({ root: root }, options));
+    }
+    return rootObservers[key];
+}
+function observeIntersection(element, options, callback) {
+    var rootInteresectionObserver = initIntersectionObserver(options);
+    observerCallbacks.set(element, callback);
+    rootInteresectionObserver.observe(element);
+    return function () {
+        observerCallbacks.delete(element);
+        rootInteresectionObserver.unobserve(element);
+    };
+}
+
+function useViewport(_a) {
+    var visualElement = _a.visualElement, whileInView = _a.whileInView, onViewportEnter = _a.onViewportEnter, onViewportLeave = _a.onViewportLeave, _b = _a.viewport, viewport = _b === void 0 ? {} : _b;
+    var state = React.useRef({
+        hasEnteredView: false,
+        isInView: false,
+    });
+    var shouldObserve = Boolean(whileInView || onViewportEnter || onViewportLeave);
+    if (viewport.once && state.current.hasEnteredView)
+        shouldObserve = false;
+    var useObserver = typeof IntersectionObserver === "undefined"
+        ? useMissingIntersectionObserver
+        : useIntersectionObserver;
+    useObserver(shouldObserve, state.current, visualElement, viewport);
+}
+var thresholdNames = {
+    some: 0,
+    all: 1,
+};
+function useIntersectionObserver(shouldObserve, state, visualElement, _a) {
+    var root = _a.root, rootMargin = _a.margin, _b = _a.amount, amount = _b === void 0 ? "some" : _b, once = _a.once;
+    React.useEffect(function () {
+        if (!shouldObserve)
+            return;
+        var options = {
+            root: root === null || root === void 0 ? void 0 : root.current,
+            rootMargin: rootMargin,
+            threshold: typeof amount === "number" ? amount : thresholdNames[amount],
+        };
+        var intersectionCallback = function (entry) {
+            var _a;
+            var isIntersecting = entry.isIntersecting;
+            /**
+             * If there's been no change in the viewport state, early return.
+             */
+            if (state.isInView === isIntersecting)
+                return;
+            state.isInView = isIntersecting;
+            /**
+             * Handle hasEnteredView. If this is only meant to run once, and
+             * element isn't visible, early return. Otherwise set hasEnteredView to true.
+             */
+            if (once && !isIntersecting && state.hasEnteredView) {
+                return;
+            }
+            else if (isIntersecting) {
+                state.hasEnteredView = true;
+            }
+            (_a = visualElement.animationState) === null || _a === void 0 ? void 0 : _a.setActive(AnimationType.InView, isIntersecting);
+            /**
+             * Use the latest committed props rather than the ones in scope
+             * when this observer is created
+             */
+            var props = visualElement.getProps();
+            var callback = isIntersecting
+                ? props.onViewportEnter
+                : props.onViewportLeave;
+            callback === null || callback === void 0 ? void 0 : callback();
+        };
+        return observeIntersection(visualElement.getInstance(), options, intersectionCallback);
+    }, [shouldObserve, root, rootMargin, amount]);
+}
+/**
+ * If IntersectionObserver is missing, we activate inView and fire onViewportEnter
+ * on mount. This way, the page will be in the state the author expects users
+ * to see it in for everyone.
+ */
+function useMissingIntersectionObserver(shouldObserve, state, visualElement) {
+    React.useEffect(function () {
+        if (!shouldObserve)
+            return;
+        if (process.env.NODE_ENV !== "production") {
+            warnOnce(false, "IntersectionObserver not available on this device. whileInView animations will trigger on mount.");
+        }
+        /**
+         * Fire this in an rAF because, at this point, the animation state
+         * won't have flushed for the first time and there's certain logic in
+         * there that behaves differently on the initial animation.
+         *
+         * This hook should be quite rarely called so setting this in an rAF
+         * is preferred to changing the behaviour of the animation state.
+         */
+        requestAnimationFrame(function () {
+            var _a;
+            state.hasEnteredView = true;
+            var onViewportEnter = visualElement.getProps().onViewportEnter;
+            onViewportEnter === null || onViewportEnter === void 0 ? void 0 : onViewportEnter();
+            (_a = visualElement.animationState) === null || _a === void 0 ? void 0 : _a.setActive(AnimationType.InView, true);
+        });
+    }, [shouldObserve]);
+}
+
 var makeRenderlessComponent = function (hook) { return function (props) {
     hook(props);
     return null;
 }; };
 
 var gestureAnimations = {
+    inView: makeRenderlessComponent(useViewport),
     tap: makeRenderlessComponent(useTapGesture),
     focus: makeRenderlessComponent(useFocusGesture),
     hover: makeRenderlessComponent(useHoverGesture),
@@ -4407,6 +4569,7 @@ function shouldBlockAnimation(_a, key) {
 
 var variantPriorityOrder = [
     AnimationType.Animate,
+    AnimationType.InView,
     AnimationType.Focus,
     AnimationType.Hover,
     AnimationType.Tap,
@@ -4723,6 +4886,7 @@ function createState() {
     var _a;
     return _a = {},
         _a[AnimationType.Animate] = createTypeState(true),
+        _a[AnimationType.InView] = createTypeState(),
         _a[AnimationType.Hover] = createTypeState(),
         _a[AnimationType.Tap] = createTypeState(),
         _a[AnimationType.Drag] = createTypeState(),
@@ -6232,11 +6396,18 @@ var convertChangedValueTypes = function (target, visualElement, changedKeys) {
     var element = visualElement.getInstance();
     var elementComputedStyle = getComputedStyle(element);
     var display = elementComputedStyle.display;
+    var origin = {};
     // If the element is currently set to display: "none", make it visible before
     // measuring the target bounding box
     if (display === "none") {
         visualElement.setStaticValue("display", target.display || "block");
     }
+    /**
+     * Record origins before we render and update styles
+     */
+    changedKeys.forEach(function (key) {
+        origin[key] = positionalValues[key](originBbox, elementComputedStyle);
+    });
     // Apply the latest values (as set in checkAndConvertChangedValueTypes)
     visualElement.syncRender();
     var targetBbox = visualElement.measureViewportBox();
@@ -6244,7 +6415,7 @@ var convertChangedValueTypes = function (target, visualElement, changedKeys) {
         // Restore styles to their **calculated computed style**, not their actual
         // originally set style. This allows us to animate between equivalent pixel units.
         var value = visualElement.getValue(key);
-        setAndResetVelocity(value, positionalValues[key](originBbox, elementComputedStyle));
+        setAndResetVelocity(value, origin[key]);
         target[key] = positionalValues[key](targetBbox, elementComputedStyle);
     });
     return target;