framer-motion 5.3.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/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",

package/dist/es/render/utils/animation-state.mjs

@@ -135,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 &&
@@ -186,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 {
@@ -303,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;
     }
@@ -334,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/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/framer-motion.cjs.js

@@ -896,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
@@ -1037,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 () { } };
     }
@@ -1071,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;
@@ -1685,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
  *
@@ -3337,6 +3345,7 @@ var validMotionProps = new Set([
     "inherit",
     "layout",
     "layoutId",
+    "layoutDependency",
     "onLayoutAnimationComplete",
     "onLayoutMeasure",
     "onBeforeLayoutMeasure",
@@ -3638,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;
@@ -3662,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)) {
@@ -3672,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];
         });
@@ -3954,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) {
@@ -4035,8 +4066,11 @@ 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);
@@ -4340,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]);
@@ -4696,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 &&
@@ -4747,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 {
@@ -4864,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;
     }
@@ -7518,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 = {
@@ -7535,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));
@@ -8100,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;
@@ -8243,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;