framer-motion 5.2.0 → 5.3.1

package/dist/es/animation/utils/transitions.mjs

@@ -6,6 +6,8 @@ import { isAnimatable } from './is-animatable.mjs';
 import { getDefaultTransition } from './default-transitions.mjs';
 import { warning } from 'hey-listen';
 import { getAnimatableNone } from '../../render/dom/value-types/animatable-none.mjs';
+import { instantAnimationState } from '../../utils/use-instant-transition-state.mjs';
+import { resolveFinalValueInKeyframes } from '../../utils/resolve-value.mjs';
 
 /**
  * Decide whether a transition is defined on a given Transition.
@@ -148,9 +150,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 () { } };
     }
@@ -182,6 +185,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;

package/dist/es/components/Reorder/Item.mjs

@@ -14,7 +14,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 = __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 = useContext(ReorderContext);
     var point = {
@@ -31,10 +31,11 @@ function ReorderItem(_a, externalRef) {
     useEffect(function () {
         registerItem(value, layout.current);
     }, [context]);
-    return (React.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.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));

package/dist/es/gestures/use-hover-gesture.mjs

@@ -8,8 +8,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) {

package/dist/es/gestures/use-tap-gesture.mjs

@@ -50,8 +50,11 @@ function useTapGesture(_a) {
             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);

package/dist/es/index.mjs

@@ -31,6 +31,7 @@ export { useDomEvent } from './events/use-dom-event.mjs';
 export { createMotionComponent } from './motion/index.mjs';
 export { visualElement } from './render/index.mjs';
 export { addScaleCorrector } from './projection/styles/scale-correction.mjs';
+export { useInstantTransition } from './utils/use-instant-transition.mjs';
 export { useInstantLayoutTransition } from './projection/use-instant-layout-transition.mjs';
 export { useResetProjection } from './projection/use-reset-projection.mjs';
 export { MotionConfigContext } from './context/MotionConfigContext.mjs';

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/use-visual-state.mjs

@@ -18,13 +18,17 @@ function makeState(_a, props, context, presenceContext) {
     }
     return state;
 }
-var makeUseVisualState = function (config) { return function (props, isStatic) {
-    var context = useContext(MotionContext);
-    var presenceContext = 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 = useContext(MotionContext);
+        var presenceContext = 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;
@@ -42,7 +46,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)) {
@@ -52,8 +57,22 @@ function makeLatestValues(props, context, presenceContext, scrapeMotionValues) {
             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];
         });

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

@@ -17,6 +17,7 @@ var validMotionProps = new Set([
     "inherit",
     "layout",
     "layoutId",
+    "layoutDependency",
     "onLayoutAnimationComplete",
     "onLayoutMeasure",
     "onBeforeLayoutMeasure",
@@ -54,6 +55,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,
@@ -134,7 +135,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 &&
@@ -185,7 +187,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 {
@@ -302,7 +304,7 @@ function createAnimationState(visualElement) {
         getState: function () { return state; },
     };
 }
-function variantsHaveChanged(prev, next) {
+function checkVariantsDidChange(prev, next) {
     if (typeof next === "string") {
         return next !== prev;
     }
@@ -324,6 +326,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(),
@@ -332,4 +335,4 @@ function createState() {
         _a;
 }
 
-export { createAnimationState, variantPriorityOrder, variantsHaveChanged };
+export { checkVariantsDidChange, createAnimationState, variantPriorityOrder };

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

@@ -22,9 +22,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 = __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]);

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/use-instant-transition-state.mjs

@@ -0,0 +1,5 @@
+var instantAnimationState = {
+    current: false,
+};
+
+export { instantAnimationState };

package/dist/es/utils/use-instant-transition.mjs

@@ -0,0 +1,28 @@
+import { __read } from 'tslib';
+import sync from 'framesync';
+import { useEffect } from 'react';
+import { useInstantLayoutTransition } from '../projection/use-instant-layout-transition.mjs';
+import { useForceUpdate } from './use-force-update.mjs';
+import { instantAnimationState } from './use-instant-transition-state.mjs';
+
+function useInstantTransition() {
+    var _a = __read(useForceUpdate(), 2), forceUpdate = _a[0], forcedRenderCount = _a[1];
+    var startInstantLayoutTransition = useInstantLayoutTransition();
+    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();
+        });
+    };
+}
+
+export { useInstantTransition };

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 };