framer-motion 5.3.0 → 5.3.1

package/dist/framer-motion.dev.js

@@ -2127,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
@@ -2268,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 () { } };
         }
@@ -2302,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;
@@ -2916,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
      *
@@ -4568,6 +4576,7 @@
         "inherit",
         "layout",
         "layoutId",
+        "layoutDependency",
         "onLayoutAnimationComplete",
         "onLayoutMeasure",
         "onBeforeLayoutMeasure",
@@ -4869,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;
@@ -4893,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)) {
@@ -4903,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];
             });
@@ -5185,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) {
@@ -5266,8 +5297,11 @@
                 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);
@@ -5571,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]);
@@ -5927,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 &&
@@ -5978,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 {
@@ -6095,7 +6128,7 @@
             getState: function () { return state; },
         };
     }
-    function variantsHaveChanged(prev, next) {
+    function checkVariantsDidChange(prev, next) {
         if (typeof next === "string") {
             return next !== prev;
         }
@@ -8748,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 = {
@@ -8765,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));
@@ -9330,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;
@@ -9473,6 +9527,7 @@
     exports.useDragControls = useDragControls;
     exports.useElementScroll = useElementScroll;
     exports.useInstantLayoutTransition = useInstantLayoutTransition;
+    exports.useInstantTransition = useInstantTransition;
     exports.useIsPresent = useIsPresent;
     exports.useMotionTemplate = useMotionTemplate;
     exports.useMotionValue = useMotionValue;