framer-motion 5.2.0 → 5.3.1

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) {
@@ -2121,6 +2127,18 @@
         return (_a = defaultValueType.getAnimatableNone) === null || _a === void 0 ? void 0 : _a.call(defaultValueType, value);
     }
 
+    var instantAnimationState = {
+        current: false,
+    };
+
+    var isCustomValue = function (v) {
+        return Boolean(v && typeof v === "object" && v.mix && v.toValue);
+    };
+    var resolveFinalValueInKeyframes = function (v) {
+        // TODO maybe throw if v.length - 1 is placeholder token?
+        return isKeyframesTarget(v) ? v[v.length - 1] || 0 : v;
+    };
+
     /**
      * Decide whether a transition is defined on a given Transition.
      * This filters out orchestration options and returns true
@@ -2262,9 +2280,10 @@
         }
         function set() {
             var _a, _b;
-            value.set(target);
+            var finalTarget = resolveFinalValueInKeyframes(target);
+            value.set(finalTarget);
             onComplete();
-            (_a = valueTransition === null || valueTransition === void 0 ? void 0 : valueTransition.onUpdate) === null || _a === void 0 ? void 0 : _a.call(valueTransition, target);
+            (_a = valueTransition === null || valueTransition === void 0 ? void 0 : valueTransition.onUpdate) === null || _a === void 0 ? void 0 : _a.call(valueTransition, finalTarget);
             (_b = valueTransition === null || valueTransition === void 0 ? void 0 : valueTransition.onComplete) === null || _b === void 0 ? void 0 : _b.call(valueTransition);
             return { stop: function () { } };
         }
@@ -2296,6 +2315,9 @@
      */
     function startAnimation(key, value, target, transition) {
         if (transition === void 0) { transition = {}; }
+        if (instantAnimationState.current) {
+            transition = { type: false };
+        }
         return value.start(function (onComplete) {
             var delayTimer;
             var controls;
@@ -2910,14 +2932,6 @@
         return FlatTree;
     }());
 
-    var isCustomValue = function (v) {
-        return Boolean(v && typeof v === "object" && v.mix && v.toValue);
-    };
-    var resolveFinalValueInKeyframes = function (v) {
-        // TODO maybe throw if v.length - 1 is placeholder token?
-        return isKeyframesTarget(v) ? v[v.length - 1] || 0 : v;
-    };
-
     /**
      * If the provided value is a MotionValue, this returns the actual value, otherwise just the value itself
      *
@@ -3219,7 +3233,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, "");
@@ -4562,6 +4576,7 @@
         "inherit",
         "layout",
         "layoutId",
+        "layoutDependency",
         "onLayoutAnimationComplete",
         "onLayoutMeasure",
         "onBeforeLayoutMeasure",
@@ -4599,6 +4614,10 @@
         "whileFocus",
         "whileTap",
         "whileHover",
+        "whileInView",
+        "onViewportEnter",
+        "onViewportLeave",
+        "viewport",
         "layoutScroll",
     ]);
     /**
@@ -4859,13 +4878,17 @@
         }
         return state;
     }
-    var makeUseVisualState = function (config) { return function (props, isStatic) {
-        var context = React.useContext(MotionContext);
-        var presenceContext = React.useContext(PresenceContext);
-        return isStatic
-            ? makeState(config, props, context, presenceContext)
-            : useConstant(function () { return makeState(config, props, context, presenceContext); });
-    }; };
+    var makeUseVisualState = function (config) {
+        return function (props, isStatic) {
+            var context = React.useContext(MotionContext);
+            var presenceContext = React.useContext(PresenceContext);
+            return isStatic
+                ? makeState(config, props, context, presenceContext)
+                : useConstant(function () {
+                    return makeState(config, props, context, presenceContext);
+                });
+        };
+    };
     function makeLatestValues(props, context, presenceContext, scrapeMotionValues) {
         var values = {};
         var blockInitialAnimation = (presenceContext === null || presenceContext === void 0 ? void 0 : presenceContext.initial) === false;
@@ -4883,7 +4906,8 @@
             initial !== null && initial !== void 0 ? initial : (initial = context.initial);
             animate !== null && animate !== void 0 ? animate : (animate = context.animate);
         }
-        var variantToSet = blockInitialAnimation || initial === false ? animate : initial;
+        var initialAnimationIsBlocked = blockInitialAnimation || initial === false;
+        var variantToSet = initialAnimationIsBlocked ? animate : initial;
         if (variantToSet &&
             typeof variantToSet !== "boolean" &&
             !isAnimationControls(variantToSet)) {
@@ -4893,8 +4917,22 @@
                 if (!resolved)
                     return;
                 var transitionEnd = resolved.transitionEnd; resolved.transition; var target = __rest(resolved, ["transitionEnd", "transition"]);
-                for (var key in target)
-                    values[key] = target[key];
+                for (var key in target) {
+                    var valueTarget = target[key];
+                    if (Array.isArray(valueTarget)) {
+                        /**
+                         * Take final keyframe if the initial animation is blocked because
+                         * we want to initialise at the end of that blocked animation.
+                         */
+                        var index = initialAnimationIsBlocked
+                            ? valueTarget.length - 1
+                            : 0;
+                        valueTarget = valueTarget[index];
+                    }
+                    if (valueTarget !== null) {
+                        values[key] = valueTarget;
+                    }
+                }
                 for (var key in transitionEnd)
                     values[key] = transitionEnd[key];
             });
@@ -4953,6 +4991,7 @@
         AnimationType["Tap"] = "whileTap";
         AnimationType["Drag"] = "whileDrag";
         AnimationType["Focus"] = "whileFocus";
+        AnimationType["InView"] = "whileInView";
         AnimationType["Exit"] = "exit";
     })(AnimationType || (AnimationType = {}));
 
@@ -5174,8 +5213,11 @@
             var _a;
             if (!isMouseEvent(event) || isDragActive())
                 return;
-            callback === null || callback === void 0 ? void 0 : callback(event, info);
+            /**
+             * Ensure we trigger animations before firing event callback
+             */
             (_a = visualElement.animationState) === null || _a === void 0 ? void 0 : _a.setActive(AnimationType.Hover, isActive);
+            callback === null || callback === void 0 ? void 0 : callback(event, info);
         };
     }
     function useHoverGesture(_a) {
@@ -5255,19 +5297,173 @@
                 return;
             isPressing.current = true;
             cancelPointerEndListeners.current = pipe(addPointerEvent(window, "pointerup", onPointerUp), addPointerEvent(window, "pointercancel", onPointerCancel));
-            onTapStart === null || onTapStart === void 0 ? void 0 : onTapStart(event, info);
+            /**
+             * Ensure we trigger animations before firing event callback
+             */
             (_a = visualElement.animationState) === null || _a === void 0 ? void 0 : _a.setActive(AnimationType.Tap, true);
+            onTapStart === null || onTapStart === void 0 ? void 0 : onTapStart(event, info);
         }
         usePointerEvent(visualElement, "pointerdown", hasPressListeners ? onPointerDown : undefined);
         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),
@@ -5409,9 +5605,7 @@
     }
     function setTarget(visualElement, definition) {
         var resolved = resolveVariant(visualElement, definition);
-        var _a = resolved
-            ? visualElement.makeTargetAnimatable(resolved, false)
-            : {}, _b = _a.transitionEnd, transitionEnd = _b === void 0 ? {} : _b; _a.transition; var target = __rest(_a, ["transitionEnd", "transition"]);
+        var _a = resolved ? visualElement.makeTargetAnimatable(resolved, false) : {}, _b = _a.transitionEnd, transitionEnd = _b === void 0 ? {} : _b; _a.transition; var target = __rest(_a, ["transitionEnd", "transition"]);
         target = __assign(__assign({}, target), transitionEnd);
         for (var key in target) {
             var value = resolveFinalValueInKeyframes(target[key]);
@@ -5638,6 +5832,7 @@
 
     var variantPriorityOrder = [
         AnimationType.Animate,
+        AnimationType.InView,
         AnimationType.Focus,
         AnimationType.Hover,
         AnimationType.Tap,
@@ -5764,7 +5959,8 @@
                  * a changed value or a value that was removed in a higher priority, we set
                  * this to true and add this prop to the animation list.
                  */
-                var shouldAnimateType = variantsHaveChanged(typeState.prevProp, prop) ||
+                var variantDidChange = checkVariantsDidChange(typeState.prevProp, prop);
+                var shouldAnimateType = variantDidChange ||
                     // If we're making this variant active, we want to always make it active
                     (type === changedActiveType &&
                         typeState.isActive &&
@@ -5815,7 +6011,7 @@
                          * detect whether any value has changed. If it has, we animate it.
                          */
                         if (isKeyframesTarget(next) && isKeyframesTarget(prev)) {
-                            if (!shallowCompare(next, prev)) {
+                            if (!shallowCompare(next, prev) || variantDidChange) {
                                 markToAnimate(key);
                             }
                             else {
@@ -5932,7 +6128,7 @@
             getState: function () { return state; },
         };
     }
-    function variantsHaveChanged(prev, next) {
+    function checkVariantsDidChange(prev, next) {
         if (typeof next === "string") {
             return next !== prev;
         }
@@ -5954,6 +6150,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(),
@@ -7463,11 +7660,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();
@@ -7475,7 +7679,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;
@@ -8577,7 +8781,7 @@
         return isMotionValue(value) ? value : useMotionValue(defaultValue);
     }
     function ReorderItem(_a, externalRef) {
-        var children = _a.children, style = _a.style, value = _a.value, _b = _a.as, as = _b === void 0 ? "li" : _b, props = __rest(_a, ["children", "style", "value", "as"]);
+        var children = _a.children, style = _a.style, value = _a.value, _b = _a.as, as = _b === void 0 ? "li" : _b, onDrag = _a.onDrag, props = __rest(_a, ["children", "style", "value", "as", "onDrag"]);
         var Component = useConstant(function () { return motion(as); });
         var context = React.useContext(ReorderContext);
         var point = {
@@ -8594,10 +8798,11 @@
         React.useEffect(function () {
             registerItem(value, layout.current);
         }, [context]);
-        return (React__namespace.createElement(Component, __assign({ drag: axis }, props, { dragSnapToOrigin: true, style: __assign(__assign({}, style), { x: point.x, y: point.y, zIndex: zIndex }), layout: true, onDrag: function (_event, _a) {
-                var velocity = _a.velocity;
+        return (React__namespace.createElement(Component, __assign({ drag: axis }, props, { dragSnapToOrigin: true, style: __assign(__assign({}, style), { x: point.x, y: point.y, zIndex: zIndex }), layout: true, onDrag: function (event, gesturePoint) {
+                var velocity = gesturePoint.velocity;
                 velocity[axis] &&
                     updateOrder(value, point[axis].get(), velocity[axis]);
+                onDrag === null || onDrag === void 0 ? void 0 : onDrag(event, gesturePoint);
             }, onLayoutMeasure: function (measured) {
                 layout.current = measured;
             }, ref: externalRef }), children));
@@ -9159,6 +9364,26 @@
         cb === null || cb === void 0 ? void 0 : cb();
     }
 
+    function useInstantTransition() {
+        var _a = __read(useForceUpdate(), 2), forceUpdate = _a[0], forcedRenderCount = _a[1];
+        var startInstantLayoutTransition = useInstantLayoutTransition();
+        React.useEffect(function () {
+            /**
+             * Unblock after two animation frames, otherwise this will unblock too soon.
+             */
+            sync.postRender(function () {
+                return sync.postRender(function () { return (instantAnimationState.current = false); });
+            });
+        }, [forcedRenderCount]);
+        return function (callback) {
+            startInstantLayoutTransition(function () {
+                instantAnimationState.current = true;
+                forceUpdate();
+                callback();
+            });
+        };
+    }
+
     function useResetProjection() {
         var reset = React__namespace.useCallback(function () {
             var root = rootProjectionNode.current;
@@ -9302,6 +9527,7 @@
     exports.useDragControls = useDragControls;
     exports.useElementScroll = useElementScroll;
     exports.useInstantLayoutTransition = useInstantLayoutTransition;
+    exports.useInstantTransition = useInstantTransition;
     exports.useIsPresent = useIsPresent;
     exports.useMotionTemplate = useMotionTemplate;
     exports.useMotionValue = useMotionValue;