framer-motion 5.3.0 → 5.4.0-beta

package/dist/framer-motion.dev.js

@@ -2,7 +2,7 @@
     typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react')) :
     typeof define === 'function' && define.amd ? define(['exports', 'react'], factory) :
     (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Motion = {}, global.React));
-}(this, (function (exports, React) { 'use strict';
+})(this, (function (exports, React) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -15,14 +15,12 @@
                     var d = Object.getOwnPropertyDescriptor(e, k);
                     Object.defineProperty(n, k, d.get ? d : {
                         enumerable: true,
-                        get: function () {
-                            return e[k];
-                        }
+                        get: function () { return e[k]; }
                     });
                 }
             });
         }
-        n['default'] = e;
+        n["default"] = e;
         return Object.freeze(n);
     }
 
@@ -1944,7 +1942,7 @@
         }
         else if (typeof definition === "string") {
             // Else lookup from table
-            invariant(easingLookup[definition] !== undefined, "Invalid easing type '" + definition + "'");
+            invariant(easingLookup[definition] !== undefined, "Invalid easing type '".concat(definition, "'"));
             return easingLookup[definition];
         }
         return definition;
@@ -2127,6 +2125,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
@@ -2244,7 +2254,7 @@
             target = getZeroUnit(origin);
         }
         var isOriginAnimatable = isAnimatable(key, origin);
-        warning(isOriginAnimatable === isTargetAnimatable, "You are trying to animate " + key + " from \"" + origin + "\" to \"" + target + "\". " + origin + " is not an animatable value - to enable this animation set " + origin + " to a value animatable to " + target + " via the `style` property.");
+        warning(isOriginAnimatable === isTargetAnimatable, "You are trying to animate ".concat(key, " from \"").concat(origin, "\" to \"").concat(target, "\". ").concat(origin, " is not an animatable value - to enable this animation set ").concat(origin, " to a value animatable to ").concat(target, " via the `style` property."));
         function start() {
             var options = {
                 from: origin,
@@ -2268,9 +2278,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 +2313,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;
@@ -2376,7 +2390,7 @@
          * Mix border radius
          */
         for (var i = 0; i < numBorders; i++) {
-            var borderLabel = "border" + borders[i] + "Radius";
+            var borderLabel = "border".concat(borders[i], "Radius");
             var followRadius = getRadius(follow, borderLabel);
             var leadRadius = getRadius(lead, borderLabel);
             if (followRadius === undefined && leadRadius === undefined)
@@ -2833,17 +2847,17 @@
          */
         var xTranslate = delta.x.translate / treeScale.x;
         var yTranslate = delta.y.translate / treeScale.y;
-        var transform = "translate3d(" + xTranslate + "px, " + yTranslate + "px, 0) ";
+        var transform = "translate3d(".concat(xTranslate, "px, ").concat(yTranslate, "px, 0) ");
         if (latestTransform) {
             var rotate = latestTransform.rotate, rotateX = latestTransform.rotateX, rotateY = latestTransform.rotateY;
             if (rotate)
-                transform += "rotate(" + rotate + "deg) ";
+                transform += "rotate(".concat(rotate, "deg) ");
             if (rotateX)
-                transform += "rotateX(" + rotateX + "deg) ";
+                transform += "rotateX(".concat(rotateX, "deg) ");
             if (rotateY)
-                transform += "rotateY(" + rotateY + "deg) ";
+                transform += "rotateY(".concat(rotateY, "deg) ");
         }
-        transform += "scale(" + delta.x.scale + ", " + delta.y.scale + ")";
+        transform += "scale(".concat(delta.x.scale, ", ").concat(delta.y.scale, ")");
         return transform === identityProjection ? "none" : transform;
     }
 
@@ -2916,14 +2930,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
      *
@@ -3882,7 +3888,7 @@
                     styles.transform = transformTemplate(valuesToRender, styles.transform);
                 }
                 var _g = this.projectionDelta, x = _g.x, y = _g.y;
-                styles.transformOrigin = x.origin * 100 + "% " + y.origin * 100 + "% 0";
+                styles.transformOrigin = "".concat(x.origin * 100, "% ").concat(y.origin * 100, "% 0");
                 if (lead.animationValues) {
                     /**
                      * If the lead component is animating, assign this either the entering/leaving
@@ -4088,7 +4094,7 @@
             }
         }
         var searchElement = searchNode && searchNode !== node.root ? searchNode.instance : document;
-        var element = searchElement.querySelector("[data-projection-id=\"" + id + "\"]");
+        var element = searchElement.querySelector("[data-projection-id=\"".concat(id, "\"]"));
         if (element)
             node.mount(element, true);
     }
@@ -4171,7 +4177,7 @@
             return this.props.children;
         };
         return VisualElementHandler;
-    }(React__default['default'].Component));
+    }(React__default["default"].Component));
 
     /**
      * Create a `motion` component.
@@ -4237,7 +4243,7 @@
              */
             return (React__namespace.createElement(VisualElementHandler, { visualElement: context.visualElement, props: __assign(__assign({}, config), props) },
                 features,
-                React__namespace.createElement(MotionContext.Provider, { value: context }, useRender(Component, props, projectionId, useMotionRef(visualState, context.visualElement, externalRef), visualState, config.isStatic))));
+                React__namespace.createElement(MotionContext.Provider, { value: context }, useRender(Component, props, projectionId, useMotionRef(visualState, context.visualElement, externalRef), visualState, config.isStatic, context.visualElement))));
         }
         return React.forwardRef(MotionComponent);
     }
@@ -4269,6 +4275,9 @@
             if (customMotionComponentConfig === void 0) { customMotionComponentConfig = {}; }
             return createMotionComponent(createConfig(Component, customMotionComponentConfig));
         }
+        if (typeof Proxy === "undefined") {
+            return custom;
+        }
         /**
          * A cache of generated `motion` components, e.g `motion.div`, `motion.input` etc.
          * Rather than generating them anew every render.
@@ -4385,7 +4394,7 @@
         var numTransformKeys = transformKeys.length;
         for (var i = 0; i < numTransformKeys; i++) {
             var key = transformKeys[i];
-            transformString += (translateAlias[key] || key) + "(" + transform[key] + ") ";
+            transformString += "".concat(translateAlias[key] || key, "(").concat(transform[key], ") ");
             if (key === "z")
                 transformHasZ = true;
         }
@@ -4411,7 +4420,7 @@
      */
     function buildTransformOrigin(_a) {
         var _b = _a.originX, originX = _b === void 0 ? "50%" : _b, _c = _a.originY, originY = _c === void 0 ? "50%" : _c, _d = _a.originZ, originZ = _d === void 0 ? 0 : _d;
-        return originX + " " + originY + " " + originZ;
+        return "".concat(originX, " ").concat(originY, " ").concat(originZ);
     }
 
     /**
@@ -4533,17 +4542,19 @@
         // The `any` isn't ideal but it is the type of createElement props argument
         var htmlProps = {};
         var style = useStyle(props, visualState, isStatic);
-        if (Boolean(props.drag)) {
+        if (Boolean(props.drag) && props.dragListener !== false) {
             // Disable the ghost element when a user drags
             htmlProps.draggable = false;
             // Disable text selection
-            style.userSelect = style.WebkitUserSelect = style.WebkitTouchCallout =
-                "none";
+            style.userSelect =
+                style.WebkitUserSelect =
+                    style.WebkitTouchCallout =
+                        "none";
             // Disable scrolling on the draggable direction
             style.touchAction =
                 props.drag === true
                     ? "none"
-                    : "pan-" + (props.drag === "x" ? "y" : "x");
+                    : "pan-".concat(props.drag === "x" ? "y" : "x");
         }
         htmlProps.style = style;
         return htmlProps;
@@ -4568,6 +4579,7 @@
         "inherit",
         "layout",
         "layoutId",
+        "layoutDependency",
         "onLayoutAnimationComplete",
         "onLayoutMeasure",
         "onBeforeLayoutMeasure",
@@ -4657,7 +4669,9 @@
         for (var key in props) {
             if (shouldForward(key) ||
                 (forwardMotionProps === true && isValidMotionProp(key)) ||
-                (!isDom && !isValidMotionProp(key))) {
+                (!isDom && !isValidMotionProp(key)) ||
+                // If trying to use native HTML drag events, forward drag listeners
+                (props["draggable"] && key.startsWith("onDrag"))) {
                 filteredProps[key] = props[key];
             }
         }
@@ -4676,7 +4690,7 @@
     function calcSVGTransformOrigin(dimensions, originX, originY) {
         var pxOriginX = calcOrigin$1(originX, dimensions.x, dimensions.width);
         var pxOriginY = calcOrigin$1(originY, dimensions.y, dimensions.height);
-        return pxOriginX + " " + pxOriginY;
+        return "".concat(pxOriginX, " ").concat(pxOriginY);
     }
 
     var dashKeys = {
@@ -4708,7 +4722,7 @@
         // Build the dash array
         var pathLength = px.transform(length);
         var pathSpacing = px.transform(spacing);
-        attrs[keys.array] = pathLength + " " + pathSpacing;
+        attrs[keys.array] = "".concat(pathLength, " ").concat(pathSpacing);
     }
 
     /**
@@ -4869,13 +4883,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 +4911,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 +4922,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 +5218,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 +5302,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);
@@ -5388,7 +5427,7 @@
                 var callback = isIntersecting
                     ? props.onViewportEnter
                     : props.onViewportLeave;
-                callback === null || callback === void 0 ? void 0 : callback();
+                callback === null || callback === void 0 ? void 0 : callback(entry);
             };
             return observeIntersection(visualElement.getInstance(), options, intersectionCallback);
         }, [shouldObserve, root, rootMargin, amount]);
@@ -5417,7 +5456,7 @@
                 var _a;
                 state.hasEnteredView = true;
                 var onViewportEnter = visualElement.getProps().onViewportEnter;
-                onViewportEnter === null || onViewportEnter === void 0 ? void 0 : onViewportEnter();
+                onViewportEnter === null || onViewportEnter === void 0 ? void 0 : onViewportEnter(null);
                 (_a = visualElement.animationState) === null || _a === void 0 ? void 0 : _a.setActive(AnimationType.InView, true);
             });
         }, [shouldObserve]);
@@ -5571,9 +5610,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 +5964,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 +6016,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 +6133,7 @@
             getState: function () { return state; },
         };
     }
-    function variantsHaveChanged(prev, next) {
+    function checkVariantsDidChange(prev, next) {
         if (typeof next === "string") {
             return next !== prev;
         }
@@ -7454,7 +7492,7 @@
     var maxDepth = 4;
     function getVariableValue(current, element, depth) {
         if (depth === void 0) { depth = 1; }
-        invariant(depth <= maxDepth, "Max CSS variable fallback depth detected in property \"" + current + "\". This may indicate a circular fallback dependency.");
+        invariant(depth <= maxDepth, "Max CSS variable fallback depth detected in property \"".concat(current, "\". This may indicate a circular fallback dependency."));
         var _a = __read(parseCSSVariable(current), 2), token = _a[0], fallback = _a[1];
         // No CSS variable detected
         if (!token)
@@ -7481,7 +7519,7 @@
         var _b;
         var target = __rest(_a, []);
         var element = visualElement.getInstance();
-        if (!(element instanceof HTMLElement))
+        if (!(element instanceof Element))
             return { target: target, transitionEnd: transitionEnd };
         // If `transitionEnd` isn't `undefined`, clone it. We could clone `target` and `transitionEnd`
         // only if they change but I think this reads clearer and this isn't a performance-critical path.
@@ -7928,7 +7966,7 @@
              */
             var x = pixelsToPercent(latest, node.target.x);
             var y = pixelsToPercent(latest, node.target.y);
-            return x + "% " + y + "%";
+            return "".concat(x, "% ").concat(y, "%");
         },
     };
 
@@ -8084,11 +8122,11 @@
             return null;
         };
         return MeasureLayoutWithContext;
-    }(React__default['default'].Component));
+    }(React__default["default"].Component));
     function MeasureLayout(props) {
         var _a = __read(usePresence(), 2), isPresent = _a[0], safeToRemove = _a[1];
         var layoutGroup = React.useContext(LayoutGroupContext);
-        return (React__default['default'].createElement(MeasureLayoutWithContext, __assign({}, props, { layoutGroup: layoutGroup, switchLayoutGroup: React.useContext(SwitchLayoutGroupContext), isPresent: isPresent, safeToRemove: safeToRemove })));
+        return (React__default["default"].createElement(MeasureLayoutWithContext, __assign({}, props, { layoutGroup: layoutGroup, switchLayoutGroup: React.useContext(SwitchLayoutGroupContext), isPresent: isPresent, safeToRemove: safeToRemove })));
     }
     var defaultScaleCorrectors = {
         borderRadius: __assign(__assign({}, correctBorderRadius), { applyTo: [
@@ -8176,15 +8214,18 @@
     var m = createMotionProxy(createDomMotionConfig);
 
     function useForceUpdate() {
-        var unloadingRef = React.useRef(false);
+        var isUnmountingRef = React.useRef(false);
         var _a = __read(React.useState(0), 2), forcedRenderCount = _a[0], setForcedRenderCount = _a[1];
-        useUnmountEffect(function () { return (unloadingRef.current = true); });
-        return [
-            React.useCallback(function () {
-                !unloadingRef.current && setForcedRenderCount(forcedRenderCount + 1);
-            }, [forcedRenderCount]),
-            forcedRenderCount,
-        ];
+        useUnmountEffect(function () { return (isUnmountingRef.current = true); });
+        var forceRender = React.useCallback(function () {
+            !isUnmountingRef.current && setForcedRenderCount(forcedRenderCount + 1);
+        }, [forcedRenderCount]);
+        /**
+         * Defer this to the end of the next animation frame in case there are multiple
+         * synchronous calls.
+         */
+        var deferredForceRender = React.useCallback(function () { return sync.postRender(forceRender); }, [forceRender]);
+        return [deferredForceRender, forcedRenderCount];
     }
 
     var presenceId = 0;
@@ -8257,7 +8298,7 @@
             var key = getChildKey(child);
             if (seenChildren) {
                 if (seenChildren.has(key)) {
-                    console.warn("Children of AnimatePresence require unique keys. \"" + key + "\" is a duplicate.");
+                    console.warn("Children of AnimatePresence require unique keys. \"".concat(key, "\" is a duplicate."));
                 }
                 seenChildren.add(key);
             }
@@ -8457,7 +8498,7 @@
     var id = 0;
     var AnimateSharedLayout = function (_a) {
         var children = _a.children;
-        return (React__namespace.createElement(LayoutGroup, { id: useConstant(function () { return "asl-" + id++; }) }, children));
+        return (React__namespace.createElement(LayoutGroup, { id: useConstant(function () { return "asl-".concat(id++); }) }, children));
     };
 
     /**
@@ -8748,7 +8789,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 = {
@@ -8757,7 +8798,7 @@
         };
         var zIndex = useTransform([point.x, point.y], function (_a) {
             var _b = __read(_a, 2), latestX = _b[0], latestY = _b[1];
-            return latestX || latestY ? 1 : 0;
+            return latestX || latestY ? 1 : "unset";
         });
         var layout = React.useRef(null);
         invariant(Boolean(context), "Reorder.Item must be a child of Reorder.Group");
@@ -8765,10 +8806,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 +9372,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 +9535,7 @@
     exports.useDragControls = useDragControls;
     exports.useElementScroll = useElementScroll;
     exports.useInstantLayoutTransition = useInstantLayoutTransition;
+    exports.useInstantTransition = useInstantTransition;
     exports.useIsPresent = useIsPresent;
     exports.useMotionTemplate = useMotionTemplate;
     exports.useMotionValue = useMotionValue;
@@ -9487,4 +9550,4 @@
 
     Object.defineProperty(exports, '__esModule', { value: true });
 
-})));
+}));