framer-motion 5.2.0 → 5.3.1

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) {
@@ -890,6 +896,18 @@ function getAnimatableNone(key, value) {
     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
@@ -1031,9 +1049,10 @@ function getAnimation(key, value, target, transition, onComplete) {
     }
     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 () { } };
     }
@@ -1065,6 +1084,9 @@ function getValueTransition(transition, key) {
  */
 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;
@@ -1679,14 +1701,6 @@ var FlatTree = /** @class */ (function () {
     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
  *
@@ -1988,7 +2002,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, "");
@@ -3331,6 +3345,7 @@ var validMotionProps = new Set([
     "inherit",
     "layout",
     "layoutId",
+    "layoutDependency",
     "onLayoutAnimationComplete",
     "onLayoutMeasure",
     "onBeforeLayoutMeasure",
@@ -3368,6 +3383,10 @@ var validMotionProps = new Set([
     "whileFocus",
     "whileTap",
     "whileHover",
+    "whileInView",
+    "onViewportEnter",
+    "onViewportLeave",
+    "viewport",
     "layoutScroll",
 ]);
 /**
@@ -3628,13 +3647,17 @@ function makeState(_a, props, context, presenceContext) {
     }
     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;
@@ -3652,7 +3675,8 @@ function makeLatestValues(props, context, presenceContext, scrapeMotionValues) {
         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)) {
@@ -3662,8 +3686,22 @@ function makeLatestValues(props, context, presenceContext, scrapeMotionValues) {
             if (!resolved)
                 return;
             var transitionEnd = resolved.transitionEnd; resolved.transition; var target = tslib.__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];
         });
@@ -3722,6 +3760,7 @@ var AnimationType;
     AnimationType["Tap"] = "whileTap";
     AnimationType["Drag"] = "whileDrag";
     AnimationType["Focus"] = "whileFocus";
+    AnimationType["InView"] = "whileInView";
     AnimationType["Exit"] = "exit";
 })(AnimationType || (AnimationType = {}));
 
@@ -3943,8 +3982,11 @@ function createHoverEvent(visualElement, isActive, callback) {
         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) {
@@ -4024,19 +4066,173 @@ function useTapGesture(_a) {
             return;
         isPressing.current = true;
         cancelPointerEndListeners.current = popmotion.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 = 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),
@@ -4178,9 +4374,7 @@ function setMotionValue(visualElement, key, value) {
 }
 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 = tslib.__rest(_a, ["transitionEnd", "transition"]);
+    var _a = resolved ? visualElement.makeTargetAnimatable(resolved, false) : {}, _b = _a.transitionEnd, transitionEnd = _b === void 0 ? {} : _b; _a.transition; var target = tslib.__rest(_a, ["transitionEnd", "transition"]);
     target = tslib.__assign(tslib.__assign({}, target), transitionEnd);
     for (var key in target) {
         var value = resolveFinalValueInKeyframes(target[key]);
@@ -4407,6 +4601,7 @@ function shouldBlockAnimation(_a, key) {
 
 var variantPriorityOrder = [
     AnimationType.Animate,
+    AnimationType.InView,
     AnimationType.Focus,
     AnimationType.Hover,
     AnimationType.Tap,
@@ -4533,7 +4728,8 @@ function createAnimationState(visualElement) {
              * 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 &&
@@ -4584,7 +4780,7 @@ function createAnimationState(visualElement) {
                      * 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 {
@@ -4701,7 +4897,7 @@ function createAnimationState(visualElement) {
         getState: function () { return state; },
     };
 }
-function variantsHaveChanged(prev, next) {
+function checkVariantsDidChange(prev, next) {
     if (typeof next === "string") {
         return next !== prev;
     }
@@ -4723,6 +4919,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 +6429,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 +6448,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;
@@ -7347,7 +7551,7 @@ function useDefaultMotionValue(value, defaultValue) {
     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 = tslib.__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 = tslib.__rest(_a, ["children", "style", "value", "as", "onDrag"]);
     var Component = useConstant(function () { return motion(as); });
     var context = React.useContext(ReorderContext);
     var point = {
@@ -7364,10 +7568,11 @@ function ReorderItem(_a, externalRef) {
     React.useEffect(function () {
         registerItem(value, layout.current);
     }, [context]);
-    return (React__namespace.createElement(Component, tslib.__assign({ drag: axis }, props, { dragSnapToOrigin: true, style: tslib.__assign(tslib.__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, tslib.__assign({ drag: axis }, props, { dragSnapToOrigin: true, style: tslib.__assign(tslib.__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));
@@ -7929,6 +8134,26 @@ function startTransition(cb) {
     cb === null || cb === void 0 ? void 0 : cb();
 }
 
+function useInstantTransition() {
+    var _a = tslib.__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__default['default'].postRender(function () {
+            return sync__default['default'].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;
@@ -8072,6 +8297,7 @@ exports.useDomEvent = useDomEvent;
 exports.useDragControls = useDragControls;
 exports.useElementScroll = useElementScroll;
 exports.useInstantLayoutTransition = useInstantLayoutTransition;
+exports.useInstantTransition = useInstantTransition;
 exports.useIsPresent = useIsPresent;
 exports.useMotionTemplate = useMotionTemplate;
 exports.useMotionValue = useMotionValue;