framer-motion 5.1.0 → 5.3.0

package/dist/framer-motion.dev.js

@@ -135,6 +135,7 @@
             "whileTap",
             "whileFocus",
             "whileDrag",
+            "whileInView",
         ]),
         exit: createDefinition(["exit"]),
         drag: createDefinition(["drag", "dragControls"]),
@@ -147,6 +148,11 @@
             "onPanSessionStart",
             "onPanEnd",
         ]),
+        inView: createDefinition([
+            "whileInView",
+            "onViewportEnter",
+            "onViewportLeave",
+        ]),
     };
     function loadFeatures(features) {
         for (var key in features) {
@@ -929,6 +935,46 @@
             return functions ? functions.map(applyDefaultFilter).join(' ') : v;
         } });
 
+    function hueToRgb(p, q, t) {
+        if (t < 0)
+            t += 1;
+        if (t > 1)
+            t -= 1;
+        if (t < 1 / 6)
+            return p + (q - p) * 6 * t;
+        if (t < 1 / 2)
+            return q;
+        if (t < 2 / 3)
+            return p + (q - p) * (2 / 3 - t) * 6;
+        return p;
+    }
+    function hslaToRgba({ hue, saturation, lightness, alpha }) {
+        hue /= 360;
+        saturation /= 100;
+        lightness /= 100;
+        let red = 0;
+        let green = 0;
+        let blue = 0;
+        if (!saturation) {
+            red = green = blue = lightness;
+        }
+        else {
+            const q = lightness < 0.5
+                ? lightness * (1 + saturation)
+                : lightness + saturation - lightness * saturation;
+            const p = 2 * lightness - q;
+            red = hueToRgb(p, q, hue + 1 / 3);
+            green = hueToRgb(p, q, hue);
+            blue = hueToRgb(p, q, hue - 1 / 3);
+        }
+        return {
+            red: Math.round(red * 255),
+            green: Math.round(green * 255),
+            blue: Math.round(blue * 255),
+            alpha,
+        };
+    }
+
     const mixLinearColor = (from, to, v) => {
         const fromExpo = from * from;
         const toExpo = to * to;
@@ -938,24 +984,25 @@
     const getColorType = (v) => colorTypes.find((type) => type.test(v));
     const notAnimatable = (color) => `'${color}' is not an animatable color. Use the equivalent color code instead.`;
     const mixColor = (from, to) => {
-        const fromColorType = getColorType(from);
-        const toColorType = getColorType(to);
+        let fromColorType = getColorType(from);
+        let toColorType = getColorType(to);
         invariant(!!fromColorType, notAnimatable(from));
         invariant(!!toColorType, notAnimatable(to));
-        invariant(fromColorType.transform === toColorType.transform, "Both colors must be hex/RGBA, OR both must be HSLA.");
-        if (!fromColorType ||
-            !toColorType ||
-            fromColorType.transform !== toColorType.transform) {
-            return (p) => `${p > 0 ? to : from}`;
-        }
-        const fromColor = fromColorType.parse(from);
-        const toColor = toColorType.parse(to);
+        let fromColor = fromColorType.parse(from);
+        let toColor = toColorType.parse(to);
+        if (fromColorType === hsla) {
+            fromColor = hslaToRgba(fromColor);
+            fromColorType = rgba;
+        }
+        if (toColorType === hsla) {
+            toColor = hslaToRgba(toColor);
+            toColorType = rgba;
+        }
         const blended = Object.assign({}, fromColor);
-        const mixFunc = fromColorType === hsla ? mix : mixLinearColor;
         return (v) => {
             for (const key in blended) {
                 if (key !== "alpha") {
-                    blended[key] = mixFunc(fromColor[key], toColor[key], v);
+                    blended[key] = mixLinearColor(fromColor[key], toColor[key], v);
                 }
             }
             blended.alpha = mix(fromColor.alpha, toColor.alpha, v);
@@ -3178,7 +3225,7 @@
                     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, "");
@@ -4558,6 +4605,10 @@
         "whileFocus",
         "whileTap",
         "whileHover",
+        "whileInView",
+        "onViewportEnter",
+        "onViewportLeave",
+        "viewport",
         "layoutScroll",
     ]);
     /**
@@ -4912,6 +4963,7 @@
         AnimationType["Tap"] = "whileTap";
         AnimationType["Drag"] = "whileDrag";
         AnimationType["Focus"] = "whileFocus";
+        AnimationType["InView"] = "whileInView";
         AnimationType["Exit"] = "exit";
     })(AnimationType || (AnimationType = {}));
 
@@ -5221,12 +5273,163 @@
         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 = __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);
+        };
+    }
+
+    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;
+            {
+                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),
@@ -5597,6 +5800,7 @@
 
     var variantPriorityOrder = [
         AnimationType.Animate,
+        AnimationType.InView,
         AnimationType.Focus,
         AnimationType.Hover,
         AnimationType.Tap,
@@ -5913,6 +6117,7 @@
         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(),
@@ -7422,11 +7627,18 @@
         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();
@@ -7434,7 +7646,7 @@
             // 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;