framer-motion 10.12.18 → 10.12.21

package/dist/cjs/dom-entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var indexLegacy = require('./index-legacy-4f1fdbbf.js');
+var indexLegacy = require('./index-legacy-23fa1404.js');
 
 
 

package/dist/cjs/{index-legacy-4f1fdbbf.js → index-legacy-23fa1404.js}

@@ -1796,12 +1796,10 @@ function animateValue({ autoplay = true, delay = 0, driver = frameloopDriver, ke
     let resolveFinishedPromise;
     let currentFinishedPromise;
     /**
-     * Create a new finished Promise every time we enter the
-     * finished state and resolve the old Promise. This is
-     * WAAPI-compatible behaviour.
+     * Resolve the current Promise every time we enter the
+     * finished state. This is WAAPI-compatible behaviour.
      */
     const updateFinishedPromise = () => {
-        resolveFinishedPromise && resolveFinishedPromise();
         currentFinishedPromise = new Promise((resolve) => {
             resolveFinishedPromise = resolve;
         });
@@ -1969,6 +1967,7 @@ function animateValue({ autoplay = true, delay = 0, driver = frameloopDriver, ke
     const cancel = () => {
         playState = "idle";
         stopAnimationDriver();
+        resolveFinishedPromise();
         updateFinishedPromise();
         startTime = cancelTime = null;
     };
@@ -1976,7 +1975,7 @@ function animateValue({ autoplay = true, delay = 0, driver = frameloopDriver, ke
         playState = "finished";
         onComplete && onComplete();
         stopAnimationDriver();
-        updateFinishedPromise();
+        resolveFinishedPromise();
     };
     const play = () => {
         if (hasStopped)
@@ -1991,6 +1990,9 @@ function animateValue({ autoplay = true, delay = 0, driver = frameloopDriver, ke
         else if (!startTime || playState === "finished") {
             startTime = now;
         }
+        if (playState === "finished") {
+            updateFinishedPromise();
+        }
         cancelTime = startTime;
         holdTime = null;
         /**
@@ -2107,9 +2109,8 @@ function createAcceleratedAnimation(value, valueName, { onUpdate, onComplete, ..
     let resolveFinishedPromise;
     let currentFinishedPromise;
     /**
-     * Create a new finished Promise every time we enter the
-     * finished state and resolve the old Promise. This is
-     * WAAPI-compatible behaviour.
+     * Resolve the current Promise every time we enter the
+     * finished state. This is WAAPI-compatible behaviour.
      */
     const updateFinishedPromise = () => {
         currentFinishedPromise = new Promise((resolve) => {
@@ -2653,7 +2654,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 = "10.12.18";
+        this.version = "10.12.21";
         /**
          * Duration, in milliseconds, since last updating frame.
          *
@@ -3036,7 +3037,7 @@ function checkTargetForNewValues(visualElement, target, origin) {
     const newValueKeys = Object.keys(target).filter((key) => !visualElement.hasValue(key));
     const numNewValues = newValueKeys.length;
     if (!numNewValues)
-        return;
+        return false;
     for (let i = 0; i < numNewValues; i++) {
         const key = newValueKeys[i];
         const targetValue = target[key];
@@ -3077,6 +3078,7 @@ function checkTargetForNewValues(visualElement, target, origin) {
         if (value !== null)
             visualElement.setBaseTarget(key, value);
     }
+    return true;
 }
 function getOriginFromTransition(key, transition) {
     if (!transition)
@@ -3623,6 +3625,9 @@ const positionalValues = {
     x: getTranslateFromMatrix(4, 13),
     y: getTranslateFromMatrix(5, 14),
 };
+// Alias translate longform names
+positionalValues.translateX = positionalValues.x;
+positionalValues.translateY = positionalValues.y;
 const convertChangedValueTypes = (target, visualElement, changedKeys) => {
     const originBbox = visualElement.measureViewportBox();
     const element = visualElement.current;
@@ -3827,7 +3832,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "10.12.18", `Attempting to mix Framer Motion versions ${nextValue.version} with 10.12.18 may not work as expected.`);
+                warnOnce(nextValue.version === "10.12.21", `Attempting to mix Framer Motion versions ${nextValue.version} with 10.12.21 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {
@@ -4294,9 +4299,10 @@ class VisualElement {
      * directly from the instance (which might have performance implications).
      */
     readValue(key) {
+        var _a;
         return this.latestValues[key] !== undefined || !this.current
             ? this.latestValues[key]
-            : this.readValueFromInstance(this.current, key, this.options);
+            : (_a = this.getBaseTargetFromProps(this.props, key)) !== null && _a !== void 0 ? _a : this.readValueFromInstance(this.current, key, this.options);
     }
     /**
      * Set the base target to later animate back to. This is currently
@@ -4380,7 +4386,11 @@ class DOMVisualElement extends VisualElement {
                 origin = transformValues(origin);
         }
         if (isMounted) {
-            checkTargetForNewValues(this, target, origin);
+            const newValues = checkTargetForNewValues(this, target, origin);
+            // If new values have been added, for instance named color values, transform these
+            if (transformValues && newValues) {
+                origin = transformValues(origin);
+            }
             const parsed = parseDomVariant(this, target, origin, transitionEnd);
             transitionEnd = parsed.transitionEnd;
             target = parsed.target;

package/dist/cjs/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var indexLegacy = require('./index-legacy-4f1fdbbf.js');
+var indexLegacy = require('./index-legacy-23fa1404.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/dist/dom-entry.d.ts

@@ -342,6 +342,9 @@ declare type VariableTransitions = {
     [key: `--${string}`]: Transition;
 };
 declare type AnimationOptionsWithValueOverrides<V = any> = StyleTransitions & SVGPathTransitions & SVGTransitions & VariableTransitions & ValueAnimationTransition<V>;
+interface DynamicAnimationOptions extends Omit<AnimationOptionsWithValueOverrides, "delay"> {
+    delay?: number | DynamicOption<number>;
+}
 declare type ElementOrSelector = Element | Element[] | NodeListOf<Element> | string;
 /**
  * @public
@@ -617,9 +620,6 @@ interface SequenceOptions extends AnimationPlaybackOptions {
     defaultTransition?: Transition;
 }
 
-interface DynamicAnimationOptions extends Omit<AnimationOptionsWithValueOverrides, "delay"> {
-    delay?: number | DynamicOption<number>;
-}
 declare const createScopedAnimate: (scope?: AnimationScope) => {
     <V>(from: V, to: V | GenericKeyframesTarget<V>, options?: ValueAnimationTransition<V> | undefined): AnimationPlaybackControls;
     <V_1>(value: MotionValue<V_1>, keyframes: V_1 | GenericKeyframesTarget<V_1>, options?: ValueAnimationTransition<V_1> | undefined): AnimationPlaybackControls;

package/dist/es/animation/animators/js/index.mjs

@@ -27,12 +27,10 @@ function animateValue({ autoplay = true, delay = 0, driver = frameloopDriver, ke
     let resolveFinishedPromise;
     let currentFinishedPromise;
     /**
-     * Create a new finished Promise every time we enter the
-     * finished state and resolve the old Promise. This is
-     * WAAPI-compatible behaviour.
+     * Resolve the current Promise every time we enter the
+     * finished state. This is WAAPI-compatible behaviour.
      */
     const updateFinishedPromise = () => {
-        resolveFinishedPromise && resolveFinishedPromise();
         currentFinishedPromise = new Promise((resolve) => {
             resolveFinishedPromise = resolve;
         });
@@ -200,6 +198,7 @@ function animateValue({ autoplay = true, delay = 0, driver = frameloopDriver, ke
     const cancel = () => {
         playState = "idle";
         stopAnimationDriver();
+        resolveFinishedPromise();
         updateFinishedPromise();
         startTime = cancelTime = null;
     };
@@ -207,7 +206,7 @@ function animateValue({ autoplay = true, delay = 0, driver = frameloopDriver, ke
         playState = "finished";
         onComplete && onComplete();
         stopAnimationDriver();
-        updateFinishedPromise();
+        resolveFinishedPromise();
     };
     const play = () => {
         if (hasStopped)
@@ -222,6 +221,9 @@ function animateValue({ autoplay = true, delay = 0, driver = frameloopDriver, ke
         else if (!startTime || playState === "finished") {
             startTime = now;
         }
+        if (playState === "finished") {
+            updateFinishedPromise();
+        }
         cancelTime = startTime;
         holdTime = null;
         /**

package/dist/es/animation/animators/waapi/create-accelerated-animation.mjs

@@ -46,9 +46,8 @@ function createAcceleratedAnimation(value, valueName, { onUpdate, onComplete, ..
     let resolveFinishedPromise;
     let currentFinishedPromise;
     /**
-     * Create a new finished Promise every time we enter the
-     * finished state and resolve the old Promise. This is
-     * WAAPI-compatible behaviour.
+     * Resolve the current Promise every time we enter the
+     * finished state. This is WAAPI-compatible behaviour.
      */
     const updateFinishedPromise = () => {
         currentFinishedPromise = new Promise((resolve) => {

package/dist/es/render/VisualElement.mjs

@@ -447,9 +447,10 @@ class VisualElement {
      * directly from the instance (which might have performance implications).
      */
     readValue(key) {
+        var _a;
         return this.latestValues[key] !== undefined || !this.current
             ? this.latestValues[key]
-            : this.readValueFromInstance(this.current, key, this.options);
+            : (_a = this.getBaseTargetFromProps(this.props, key)) !== null && _a !== void 0 ? _a : this.readValueFromInstance(this.current, key, this.options);
     }
     /**
      * Set the base target to later animate back to. This is currently

package/dist/es/render/dom/DOMVisualElement.mjs

@@ -32,7 +32,11 @@ class DOMVisualElement extends VisualElement {
                 origin = transformValues(origin);
         }
         if (isMounted) {
-            checkTargetForNewValues(this, target, origin);
+            const newValues = checkTargetForNewValues(this, target, origin);
+            // If new values have been added, for instance named color values, transform these
+            if (transformValues && newValues) {
+                origin = transformValues(origin);
+            }
             const parsed = parseDomVariant(this, target, origin, transitionEnd);
             transitionEnd = parsed.transitionEnd;
             target = parsed.target;

package/dist/es/render/dom/utils/unit-conversion.mjs

@@ -69,6 +69,9 @@ const positionalValues = {
     x: getTranslateFromMatrix(4, 13),
     y: getTranslateFromMatrix(5, 14),
 };
+// Alias translate longform names
+positionalValues.translateX = positionalValues.x;
+positionalValues.translateY = positionalValues.y;
 const convertChangedValueTypes = (target, visualElement, changedKeys) => {
     const originBbox = visualElement.measureViewportBox();
     const element = visualElement.current;

package/dist/es/render/utils/motion-values.mjs

@@ -22,7 +22,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "10.12.18", `Attempting to mix Framer Motion versions ${nextValue.version} with 10.12.18 may not work as expected.`);
+                warnOnce(nextValue.version === "10.12.21", `Attempting to mix Framer Motion versions ${nextValue.version} with 10.12.21 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {

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

@@ -56,7 +56,7 @@ function checkTargetForNewValues(visualElement, target, origin) {
     const newValueKeys = Object.keys(target).filter((key) => !visualElement.hasValue(key));
     const numNewValues = newValueKeys.length;
     if (!numNewValues)
-        return;
+        return false;
     for (let i = 0; i < numNewValues; i++) {
         const key = newValueKeys[i];
         const targetValue = target[key];
@@ -97,6 +97,7 @@ function checkTargetForNewValues(visualElement, target, origin) {
         if (value !== null)
             visualElement.setBaseTarget(key, value);
     }
+    return true;
 }
 function getOriginFromTransition(key, transition) {
     if (!transition)

package/dist/es/value/index.mjs

@@ -26,7 +26,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 = "10.12.18";
+        this.version = "10.12.21";
         /**
          * Duration, in milliseconds, since last updating frame.
          *

package/dist/framer-motion.dev.js

@@ -2925,12 +2925,10 @@
         let resolveFinishedPromise;
         let currentFinishedPromise;
         /**
-         * Create a new finished Promise every time we enter the
-         * finished state and resolve the old Promise. This is
-         * WAAPI-compatible behaviour.
+         * Resolve the current Promise every time we enter the
+         * finished state. This is WAAPI-compatible behaviour.
          */
         const updateFinishedPromise = () => {
-            resolveFinishedPromise && resolveFinishedPromise();
             currentFinishedPromise = new Promise((resolve) => {
                 resolveFinishedPromise = resolve;
             });
@@ -3098,6 +3096,7 @@
         const cancel = () => {
             playState = "idle";
             stopAnimationDriver();
+            resolveFinishedPromise();
             updateFinishedPromise();
             startTime = cancelTime = null;
         };
@@ -3105,7 +3104,7 @@
             playState = "finished";
             onComplete && onComplete();
             stopAnimationDriver();
-            updateFinishedPromise();
+            resolveFinishedPromise();
         };
         const play = () => {
             if (hasStopped)
@@ -3120,6 +3119,9 @@
             else if (!startTime || playState === "finished") {
                 startTime = now;
             }
+            if (playState === "finished") {
+                updateFinishedPromise();
+            }
             cancelTime = startTime;
             holdTime = null;
             /**
@@ -3236,9 +3238,8 @@
         let resolveFinishedPromise;
         let currentFinishedPromise;
         /**
-         * Create a new finished Promise every time we enter the
-         * finished state and resolve the old Promise. This is
-         * WAAPI-compatible behaviour.
+         * Resolve the current Promise every time we enter the
+         * finished state. This is WAAPI-compatible behaviour.
          */
         const updateFinishedPromise = () => {
             currentFinishedPromise = new Promise((resolve) => {
@@ -3782,7 +3783,7 @@
              * 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 = "10.12.18";
+            this.version = "10.12.21";
             /**
              * Duration, in milliseconds, since last updating frame.
              *
@@ -4165,7 +4166,7 @@
         const newValueKeys = Object.keys(target).filter((key) => !visualElement.hasValue(key));
         const numNewValues = newValueKeys.length;
         if (!numNewValues)
-            return;
+            return false;
         for (let i = 0; i < numNewValues; i++) {
             const key = newValueKeys[i];
             const targetValue = target[key];
@@ -4206,6 +4207,7 @@
             if (value !== null)
                 visualElement.setBaseTarget(key, value);
         }
+        return true;
     }
     function getOriginFromTransition(key, transition) {
         if (!transition)
@@ -6375,6 +6377,9 @@
         x: getTranslateFromMatrix(4, 13),
         y: getTranslateFromMatrix(5, 14),
     };
+    // Alias translate longform names
+    positionalValues.translateX = positionalValues.x;
+    positionalValues.translateY = positionalValues.y;
     const convertChangedValueTypes = (target, visualElement, changedKeys) => {
         const originBbox = visualElement.measureViewportBox();
         const element = visualElement.current;
@@ -6579,7 +6584,7 @@
                  * and warn against mismatches.
                  */
                 {
-                    warnOnce(nextValue.version === "10.12.18", `Attempting to mix Framer Motion versions ${nextValue.version} with 10.12.18 may not work as expected.`);
+                    warnOnce(nextValue.version === "10.12.21", `Attempting to mix Framer Motion versions ${nextValue.version} with 10.12.21 may not work as expected.`);
                 }
             }
             else if (isMotionValue(prevValue)) {
@@ -7045,9 +7050,10 @@
          * directly from the instance (which might have performance implications).
          */
         readValue(key) {
+            var _a;
             return this.latestValues[key] !== undefined || !this.current
                 ? this.latestValues[key]
-                : this.readValueFromInstance(this.current, key, this.options);
+                : (_a = this.getBaseTargetFromProps(this.props, key)) !== null && _a !== void 0 ? _a : this.readValueFromInstance(this.current, key, this.options);
         }
         /**
          * Set the base target to later animate back to. This is currently
@@ -7131,7 +7137,11 @@
                     origin = transformValues(origin);
             }
             if (isMounted) {
-                checkTargetForNewValues(this, target, origin);
+                const newValues = checkTargetForNewValues(this, target, origin);
+                // If new values have been added, for instance named color values, transform these
+                if (transformValues && newValues) {
+                    origin = transformValues(origin);
+                }
                 const parsed = parseDomVariant(this, target, origin, transitionEnd);
                 transitionEnd = parsed.transitionEnd;
                 target = parsed.target;