framer-motion 11.2.0-alpha.0 → 11.2.1

package/dist/cjs/{dom-entry-BNd0N1D8.js → dom-entry-Bn7tpd2Y.js}

@@ -708,12 +708,21 @@ function scrapeMotionValuesFromProps(props, prevProps, visualElement) {
     return newValues;
 }
 
-function resolveVariantFromProps(props, definition, custom, currentValues = {}, currentVelocity = {}) {
+function getValueState(visualElement) {
+    const state = [{}, {}];
+    visualElement === null || visualElement === void 0 ? void 0 : visualElement.values.forEach((value, key) => {
+        state[0][key] = value.get();
+        state[1][key] = value.getVelocity();
+    });
+    return state;
+}
+function resolveVariantFromProps(props, definition, custom, visualElement) {
     /**
      * If the variant definition is a function, resolve.
      */
     if (typeof definition === "function") {
-        definition = definition(custom !== undefined ? custom : props.custom, currentValues, currentVelocity);
+        const [current, velocity] = getValueState(visualElement);
+        definition = definition(custom !== undefined ? custom : props.custom, current, velocity);
     }
     /**
      * If the variant definition is a variant label, or
@@ -728,7 +737,8 @@ function resolveVariantFromProps(props, definition, custom, currentValues = {},
      * If so, resolve. This can only have returned a valid target object.
      */
     if (typeof definition === "function") {
-        definition = definition(custom !== undefined ? custom : props.custom, currentValues, currentVelocity);
+        const [current, velocity] = getValueState(visualElement);
+        definition = definition(custom !== undefined ? custom : props.custom, current, velocity);
     }
     return definition;
 }
@@ -759,25 +769,9 @@ const { schedule: frame, cancel: cancelFrame, state: frameData, steps, } = creat
 const combineFunctions = (a, b) => (v) => b(a(v));
 const pipe = (...transformers) => transformers.reduce(combineFunctions);
 
-/**
- * Creates an object containing the latest state of every MotionValue on a VisualElement
- */
-function getCurrent(visualElement) {
-    const current = {};
-    visualElement.values.forEach((value, key) => (current[key] = value.get()));
-    return current;
-}
-/**
- * Creates an object containing the latest velocity of every MotionValue on a VisualElement
- */
-function getVelocity(visualElement) {
-    const velocity = {};
-    visualElement.values.forEach((value, key) => (velocity[key] = value.getVelocity()));
-    return velocity;
-}
 function resolveVariant(visualElement, definition, custom) {
     const props = visualElement.getProps();
-    return resolveVariantFromProps(props, definition, custom !== undefined ? custom : props.custom, getCurrent(visualElement), getVelocity(visualElement));
+    return resolveVariantFromProps(props, definition, custom !== undefined ? custom : props.custom, visualElement);
 }
 
 /**
@@ -1464,13 +1458,15 @@ function getAnimatableNone(key, value) {
  * the "none" keyframes. In this case "#fff" or "200px 200px" - then these get turned into
  * zero equivalents, i.e. "#fff0" or "0px 0px".
  */
+const invalidTemplates = new Set(["auto", "none", "0"]);
 function makeNoneKeyframesAnimatable(unresolvedKeyframes, noneKeyframeIndexes, name) {
     let i = 0;
     let animatableTemplate = undefined;
     while (i < unresolvedKeyframes.length && !animatableTemplate) {
-        if (typeof unresolvedKeyframes[i] === "string" &&
-            unresolvedKeyframes[i] !== "none" &&
-            unresolvedKeyframes[i] !== "0") {
+        const keyframe = unresolvedKeyframes[i];
+        if (typeof keyframe === "string" &&
+            !invalidTemplates.has(keyframe) &&
+            analyseComplexValue(keyframe).values.length) {
             animatableTemplate = unresolvedKeyframes[i];
         }
         i++;
@@ -1506,6 +1502,12 @@ class DOMKeyframesResolver extends KeyframeResolver {
                 }
             }
         }
+        /**
+         * Resolve "none" values. We do this potentially twice - once before and once after measuring keyframes.
+         * This could be seen as inefficient but it's a trade-off to avoid measurements in more situations, which
+         * have a far bigger performance impact.
+         */
+        this.resolveNoneKeyframes();
         /**
          * Check to see if unit type has changed. If so schedule jobs that will
          * temporarily set styles to the destination keyframes.
@@ -1513,7 +1515,7 @@ class DOMKeyframesResolver extends KeyframeResolver {
          * TODO: We can throw if there are multiple keyframes and the value type changes.
          */
         if (!positionalKeys.has(name) || unresolvedKeyframes.length !== 2) {
-            return this.resolveNoneKeyframes();
+            return;
         }
         const [origin, target] = unresolvedKeyframes;
         const originType = findDimensionValueType(origin);
@@ -1648,6 +1650,13 @@ function canAnimate(keyframes, name, type, velocity) {
     const originKeyframe = keyframes[0];
     if (originKeyframe === null)
         return false;
+    /**
+     * These aren't traditionally animatable but we do support them.
+     * In future we could look into making this more generic or replacing
+     * this function with mix() === mixImmediate
+     */
+    if (name === "display" || name === "visibility")
+        return true;
     const targetKeyframe = keyframes[keyframes.length - 1];
     const isOriginAnimatable = isAnimatable(originKeyframe, name);
     const isTargetAnimatable = isAnimatable(targetKeyframe, name);
@@ -2264,6 +2273,21 @@ const mixColor = (from, to) => {
     };
 };
 
+const invisibleValues = new Set(["none", "hidden"]);
+/**
+ * Returns a function that, when provided a progress value between 0 and 1,
+ * will return the "none" or "hidden" string only when the progress is that of
+ * the origin or target.
+ */
+function mixVisibility(origin, target) {
+    if (invisibleValues.has(origin)) {
+        return (p) => (p <= 0 ? origin : target);
+    }
+    else {
+        return (p) => (p >= 1 ? target : origin);
+    }
+}
+
 function mixImmediate(a, b) {
     return (p) => (p > 0 ? b : a);
 }
@@ -2336,6 +2360,12 @@ const mixComplex = (origin, target) => {
         originStats.indexes.color.length === targetStats.indexes.color.length &&
         originStats.indexes.number.length >= targetStats.indexes.number.length;
     if (canInterpolate) {
+        if ((invisibleValues.has(origin) &&
+            !targetStats.values.length) ||
+            (invisibleValues.has(target) &&
+                !originStats.values.length)) {
+            return mixVisibility(origin, target);
+        }
         return pipe(mixArray(matchOrder(originStats, targetStats), targetStats.values), template);
     }
     else {
@@ -3419,7 +3449,7 @@ class MotionValue {
          * This will be replaced by the build step with the latest version number.
          * When MotionValues are provided to motion components, warn if versions are mixed.
          */
-        this.version = "11.2.0-alpha.0";
+        this.version = "11.2.1";
         /**
          * Tracks whether this value can output a velocity. Currently this is only true
          * if the value is numerical, but we might be able to widen the scope here and support
@@ -3713,7 +3743,7 @@ function setMotionValue(visualElement, key, value) {
 }
 function setTarget(visualElement, definition) {
     const resolved = resolveVariant(visualElement, definition);
-    let { transitionEnd = {}, transitionFrom, transition = {}, ...target } = resolved || {};
+    let { transitionEnd = {}, transition = {}, ...target } = resolved || {};
     target = { ...target, ...transitionEnd };
     for (const key in target) {
         const value = resolveFinalValueInKeyframes(target[key]);
@@ -3734,7 +3764,7 @@ function shouldBlockAnimation({ protectedKeys, needsAnimating }, key) {
 }
 function animateTarget(visualElement, targetAndTransition, { delay = 0, transitionOverride, type } = {}) {
     var _a;
-    let { transition = visualElement.getDefaultTransition(), transitionFrom, transitionEnd, ...target } = targetAndTransition;
+    let { transition = visualElement.getDefaultTransition(), transitionEnd, ...target } = targetAndTransition;
     const willChange = visualElement.getValue("willChange");
     if (transitionOverride)
         transition = transitionOverride;
@@ -3750,23 +3780,10 @@ function animateTarget(visualElement, targetAndTransition, { delay = 0, transiti
                 shouldBlockAnimation(animationTypeState, key))) {
             continue;
         }
-        let transitionFromType;
-        if (transitionFrom) {
-            if (value.currentAnimationState) {
-                transitionFromType = transitionFrom[value.currentAnimationState];
-            }
-            else {
-                // This is the first time the value has been animated.
-                const initialType = visualElement.getProps().initial || type === "animate"
-                    ? "initial"
-                    : "animate";
-                transitionFromType = transitionFrom[initialType];
-            }
-        }
         const valueTransition = {
             delay,
             elapsed: 0,
-            ...getValueTransition$1(transitionFromType || transition || {}, key),
+            ...getValueTransition$1(transition || {}, key),
         };
         /**
          * If this is the first time a value is being animated, check
@@ -3787,7 +3804,6 @@ function animateTarget(visualElement, targetAndTransition, { delay = 0, transiti
         value.start(animateMotionValue(key, value, valueTarget, visualElement.shouldReduceMotion && transformProps.has(key)
             ? { type: false }
             : valueTransition, visualElement, isHandoff));
-        value.currentAnimationState = type || "animate";
         const animation = value.animation;
         if (animation) {
             if (isWillChangeMotionValue(willChange)) {
@@ -4202,7 +4218,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "11.2.0-alpha.0", `Attempting to mix Framer Motion versions ${nextValue.version} with 11.2.0-alpha.0 may not work as expected.`);
+                warnOnce(nextValue.version === "11.2.1", `Attempting to mix Framer Motion versions ${nextValue.version} with 11.2.1 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {

package/dist/cjs/dom-entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var domEntry = require('./dom-entry-BNd0N1D8.js');
+var domEntry = require('./dom-entry-Bn7tpd2Y.js');
 
 
 

package/dist/cjs/index.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
-var domEntry = require('./dom-entry-BNd0N1D8.js');
+var domEntry = require('./dom-entry-Bn7tpd2Y.js');
 
 function _interopNamespaceDefault(e) {
     var n = Object.create(null);
@@ -636,7 +636,7 @@ function makeLatestValues(props, context, presenceContext, scrapeMotionValues) {
             const resolved = domEntry.resolveVariantFromProps(props, definition);
             if (!resolved)
                 return;
-            const { transitionEnd, transitionFrom, transition, ...target } = resolved;
+            const { transitionEnd, transition, ...target } = resolved;
             for (const key in target) {
                 let valueTarget = target[key];
                 if (Array.isArray(valueTarget)) {
@@ -820,8 +820,9 @@ function addHoverEvent(node, isActive) {
             node.animationState.setActive("whileHover", isActive);
         }
         const callback = props[callbackName];
-        if (callback)
-            callback(event, info);
+        if (callback) {
+            domEntry.frame.postRender(() => callback(event, info));
+        }
     };
     return addPointerEvent(node.current, eventName, handleEvent, {
         passive: !node.getProps()[callbackName],
@@ -914,10 +915,13 @@ class PressGesture extends Feature {
                  * We only count this as a tap gesture if the event.target is the same
                  * as, or a child of, this component's element
                  */
-                !globalTapTarget &&
+                const handler = !globalTapTarget &&
                     !isNodeOrChild(this.node.current, endEvent.target)
-                    ? onTapCancel && onTapCancel(endEvent, endInfo)
-                    : onTap && onTap(endEvent, endInfo);
+                    ? onTapCancel
+                    : onTap;
+                if (handler) {
+                    domEntry.frame.update(() => handler(endEvent, endInfo));
+                }
             };
             const removePointerUpListener = addPointerEvent(window, "pointerup", endPointerPress, {
                 passive: !(props.onTap || props["onPointerUp"]),
@@ -938,8 +942,9 @@ class PressGesture extends Feature {
                         return;
                     fireSyntheticPointerEvent("up", (event, info) => {
                         const { onTap } = this.node.getProps();
-                        if (onTap)
-                            onTap(event, info);
+                        if (onTap) {
+                            domEntry.frame.postRender(() => onTap(event, info));
+                        }
                     });
                 };
                 this.removeEndListeners();
@@ -968,7 +973,7 @@ class PressGesture extends Feature {
             this.node.animationState.setActive("whileTap", true);
         }
         if (onTapStart) {
-            onTapStart(event, info);
+            domEntry.frame.postRender(() => onTapStart(event, info));
         }
     }
     checkPressEnd() {
@@ -984,8 +989,9 @@ class PressGesture extends Feature {
         if (!this.checkPressEnd())
             return;
         const { onTapCancel } = this.node.getProps();
-        if (onTapCancel)
-            onTapCancel(event, info);
+        if (onTapCancel) {
+            domEntry.frame.postRender(() => onTapCancel(event, info));
+        }
     }
     mount() {
         const props = this.node.getProps();
@@ -1251,7 +1257,7 @@ function createAnimationState(visualElement) {
             ? (_a = visualElement.presenceContext) === null || _a === void 0 ? void 0 : _a.custom
             : undefined);
         if (resolved) {
-            const { transition, transitionEnd, transitionFrom, ...target } = resolved;
+            const { transition, transitionEnd, ...target } = resolved;
             acc = { ...acc, ...target, ...transitionEnd };
         }
         return acc;
@@ -1483,16 +1489,7 @@ function createAnimationState(visualElement) {
                 // @ts-expect-error - @mattgperry to figure if we should do something here
                 fallbackAnimation[key] = fallbackTarget !== null && fallbackTarget !== void 0 ? fallbackTarget : null;
             });
-            const { initial } = props;
-            if (initial && typeof initial !== "boolean") {
-                const { transition, transitionFrom } = domEntry.resolveVariant(visualElement, Array.isArray(initial) ? initial[0] : initial) || {};
-                fallbackAnimation.transition = transition;
-                fallbackAnimation.transitionFrom = transitionFrom;
-            }
-            animations.push({
-                animation: fallbackAnimation,
-                options: { type: "initial" },
-            });
+            animations.push({ animation: fallbackAnimation });
         }
         let shouldAnimate = Boolean(animations.length);
         if (isInitialRender &&
@@ -2023,8 +2020,9 @@ class VisualElementDragControls {
                 this.originPoint[axis] = current;
             });
             // Fire onDragStart event
-            if (onDragStart)
-                onDragStart(event, info);
+            if (onDragStart) {
+                domEntry.frame.postRender(() => onDragStart(event, info));
+            }
             const { animationState } = this.visualElement;
             animationState && animationState.setActive("whileDrag", true);
         };
@@ -2087,8 +2085,9 @@ class VisualElementDragControls {
         const { velocity } = info;
         this.startAnimation(velocity);
         const { onDragEnd } = this.getProps();
-        if (onDragEnd)
-            onDragEnd(event, info);
+        if (onDragEnd) {
+            domEntry.frame.postRender(() => onDragEnd(event, info));
+        }
     }
     cancel() {
         this.isDragging = false;
@@ -2429,7 +2428,7 @@ class DragGesture extends Feature {
 
 const asyncHandler = (handler) => (event, info) => {
     if (handler) {
-        handler(event, info);
+        domEntry.frame.postRender(() => handler(event, info));
     }
 };
 class PanGesture extends Feature {
@@ -2451,8 +2450,9 @@ class PanGesture extends Feature {
             onMove: onPan,
             onEnd: (event, info) => {
                 delete this.session;
-                if (onPanEnd)
-                    onPanEnd(event, info);
+                if (onPanEnd) {
+                    domEntry.frame.postRender(() => onPanEnd(event, info));
+                }
             },
         };
     }

package/dist/dom-entry.d.ts

@@ -38,8 +38,6 @@ interface FrameData {
     isProcessing: boolean;
 }
 
-type AnimationType = "animate" | "whileHover" | "whileTap" | "whileDrag" | "whileFocus" | "whileInView" | "exit";
-
 /**
  * @public
  */
@@ -507,10 +505,6 @@ declare class MotionValue<V = any> {
      * A reference to the currently-controlling animation.
      */
     animation?: AnimationPlaybackControls;
-    /**
-     * The current animation type of the `MotionValue`.
-     */
-    currentAnimationState?: AnimationType | "initial";
     setCurrent(current: V): void;
     setPrevFrameValue(prevFrameValue?: V | undefined): void;
     /**