framer-motion 7.3.6 → 7.5.0

package/dist/cjs/index.js

@@ -683,15 +683,17 @@ function buildHTMLStyles(state, latestValues, options, transformTemplate) {
             style[key] = valueAsType;
         }
     }
-    if (hasTransform || transformTemplate) {
-        style.transform = buildTransform(state, options, transformIsNone, transformTemplate);
-    }
-    else if (!latestValues.transform && style.transform) {
-        /**
-         * If we have previously created a transform but currently don't have any,
-         * reset transform style to none.
-         */
-        style.transform = "none";
+    if (!latestValues.transform) {
+        if (hasTransform || transformTemplate) {
+            style.transform = buildTransform(state, options, transformIsNone, transformTemplate);
+        }
+        else if (style.transform) {
+            /**
+             * If we have previously created a transform but currently don't have any,
+             * reset transform style to none.
+             */
+            style.transform = "none";
+        }
     }
     /**
      * Build a transformOrigin style. Uses the same defaults as the browser for
@@ -784,6 +786,7 @@ const inViewProps = [
 const validMotionProps = new Set([
     "initial",
     "style",
+    "values",
     "variants",
     "transition",
     "transformTemplate",
@@ -2242,7 +2245,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 = "7.3.6";
+        this.version = "7.5.0";
         /**
          * Duration, in milliseconds, since last updating frame.
          *
@@ -4218,7 +4221,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "7.3.6", `Attempting to mix Framer Motion versions ${nextValue.version} with 7.3.6 may not work as expected.`);
+                warnOnce(nextValue.version === "7.5.0", `Attempting to mix Framer Motion versions ${nextValue.version} with 7.5.0 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {
@@ -4353,6 +4356,16 @@ const visualElement = ({ treeType = "", build, getBaseTarget, makeTargetAnimatab
             }
         }
     }
+    /**
+     * Update external values with initial values
+     */
+    if (props.values) {
+        for (const key in props.values) {
+            if (latestValues[key] !== undefined) {
+                props.values[key].set(latestValues[key]);
+            }
+        }
+    }
     /**
      * Determine what role this visual element should take in the variant tree.
      */
@@ -4598,6 +4611,9 @@ const visualElement = ({ treeType = "", build, getBaseTarget, makeTargetAnimatab
          * value, we'll create one if none exists.
          */
         getValue(key, defaultValue) {
+            if (props.values && props.values[key]) {
+                return props.values[key];
+            }
             let value = values.get(key);
             if (value === undefined && defaultValue !== undefined) {
                 value = motionValue(defaultValue);
@@ -7840,10 +7856,10 @@ function useAnimationFrame(callback) {
     React.useEffect(() => {
         if (isStatic)
             return;
-        const provideTimeSinceStart = ({ timestamp }) => {
+        const provideTimeSinceStart = ({ timestamp, delta }) => {
             if (!initialTimestamp.current)
                 initialTimestamp.current = timestamp;
-            callback(timestamp - initialTimestamp.current);
+            callback(timestamp - initialTimestamp.current, delta);
         };
         sync__default["default"].update(provideTimeSinceStart, true);
         return () => sync.cancelSync.update(provideTimeSinceStart);

package/dist/es/motion/utils/valid-prop.mjs

@@ -25,6 +25,7 @@ const inViewProps = [
 const validMotionProps = new Set([
     "initial",
     "style",
+    "values",
     "variants",
     "transition",
     "transformTemplate",

package/dist/es/render/html/utils/build-styles.mjs

@@ -51,15 +51,17 @@ function buildHTMLStyles(state, latestValues, options, transformTemplate) {
             style[key] = valueAsType;
         }
     }
-    if (hasTransform || transformTemplate) {
-        style.transform = buildTransform(state, options, transformIsNone, transformTemplate);
-    }
-    else if (!latestValues.transform && style.transform) {
-        /**
-         * If we have previously created a transform but currently don't have any,
-         * reset transform style to none.
-         */
-        style.transform = "none";
+    if (!latestValues.transform) {
+        if (hasTransform || transformTemplate) {
+            style.transform = buildTransform(state, options, transformIsNone, transformTemplate);
+        }
+        else if (style.transform) {
+            /**
+             * If we have previously created a transform but currently don't have any,
+             * reset transform style to none.
+             */
+            style.transform = "none";
+        }
     }
     /**
      * Build a transformOrigin style. Uses the same defaults as the browser for

package/dist/es/render/index.mjs

@@ -112,6 +112,16 @@ const visualElement = ({ treeType = "", build, getBaseTarget, makeTargetAnimatab
             }
         }
     }
+    /**
+     * Update external values with initial values
+     */
+    if (props.values) {
+        for (const key in props.values) {
+            if (latestValues[key] !== undefined) {
+                props.values[key].set(latestValues[key]);
+            }
+        }
+    }
     /**
      * Determine what role this visual element should take in the variant tree.
      */
@@ -357,6 +367,9 @@ const visualElement = ({ treeType = "", build, getBaseTarget, makeTargetAnimatab
          * value, we'll create one if none exists.
          */
         getValue(key, defaultValue) {
+            if (props.values && props.values[key]) {
+                return props.values[key];
+            }
             let value = values.get(key);
             if (value === undefined && defaultValue !== undefined) {
                 value = motionValue(defaultValue);

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 === "7.3.6", `Attempting to mix Framer Motion versions ${nextValue.version} with 7.3.6 may not work as expected.`);
+                warnOnce(nextValue.version === "7.5.0", `Attempting to mix Framer Motion versions ${nextValue.version} with 7.5.0 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {

package/dist/es/utils/use-animation-frame.mjs

@@ -8,10 +8,10 @@ function useAnimationFrame(callback) {
     useEffect(() => {
         if (isStatic)
             return;
-        const provideTimeSinceStart = ({ timestamp }) => {
+        const provideTimeSinceStart = ({ timestamp, delta }) => {
             if (!initialTimestamp.current)
                 initialTimestamp.current = timestamp;
-            callback(timestamp - initialTimestamp.current);
+            callback(timestamp - initialTimestamp.current, delta);
         };
         sync.update(provideTimeSinceStart, true);
         return () => cancelSync.update(provideTimeSinceStart);

package/dist/es/value/index.mjs

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

package/dist/framer-motion.dev.js

@@ -878,15 +878,17 @@
                 style[key] = valueAsType;
             }
         }
-        if (hasTransform || transformTemplate) {
-            style.transform = buildTransform(state, options, transformIsNone, transformTemplate);
-        }
-        else if (!latestValues.transform && style.transform) {
-            /**
-             * If we have previously created a transform but currently don't have any,
-             * reset transform style to none.
-             */
-            style.transform = "none";
+        if (!latestValues.transform) {
+            if (hasTransform || transformTemplate) {
+                style.transform = buildTransform(state, options, transformIsNone, transformTemplate);
+            }
+            else if (style.transform) {
+                /**
+                 * If we have previously created a transform but currently don't have any,
+                 * reset transform style to none.
+                 */
+                style.transform = "none";
+            }
         }
         /**
          * Build a transformOrigin style. Uses the same defaults as the browser for
@@ -979,6 +981,7 @@
     const validMotionProps = new Set([
         "initial",
         "style",
+        "values",
         "variants",
         "transition",
         "transformTemplate",
@@ -3410,7 +3413,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 = "7.3.6";
+            this.version = "7.5.0";
             /**
              * Duration, in milliseconds, since last updating frame.
              *
@@ -5386,7 +5389,7 @@
                  * and warn against mismatches.
                  */
                 {
-                    warnOnce(nextValue.version === "7.3.6", `Attempting to mix Framer Motion versions ${nextValue.version} with 7.3.6 may not work as expected.`);
+                    warnOnce(nextValue.version === "7.5.0", `Attempting to mix Framer Motion versions ${nextValue.version} with 7.5.0 may not work as expected.`);
                 }
             }
             else if (isMotionValue(prevValue)) {
@@ -5521,6 +5524,16 @@
                 }
             }
         }
+        /**
+         * Update external values with initial values
+         */
+        if (props.values) {
+            for (const key in props.values) {
+                if (latestValues[key] !== undefined) {
+                    props.values[key].set(latestValues[key]);
+                }
+            }
+        }
         /**
          * Determine what role this visual element should take in the variant tree.
          */
@@ -5766,6 +5779,9 @@
              * value, we'll create one if none exists.
              */
             getValue(key, defaultValue) {
+                if (props.values && props.values[key]) {
+                    return props.values[key];
+                }
                 let value = values.get(key);
                 if (value === undefined && defaultValue !== undefined) {
                     value = motionValue(defaultValue);
@@ -9589,10 +9605,10 @@
         React.useEffect(() => {
             if (isStatic)
                 return;
-            const provideTimeSinceStart = ({ timestamp }) => {
+            const provideTimeSinceStart = ({ timestamp, delta }) => {
                 if (!initialTimestamp.current)
                     initialTimestamp.current = timestamp;
-                callback(timestamp - initialTimestamp.current);
+                callback(timestamp - initialTimestamp.current, delta);
             };
             sync.update(provideTimeSinceStart, true);
             return () => cancelSync.update(provideTimeSinceStart);