framer-motion 7.10.2 → 7.10.3

package/dist/cjs/index.js

@@ -80,7 +80,12 @@ function useVisualElement(Component, visualState, props, createVisualElement) {
     useIsomorphicLayoutEffect(() => {
         visualElement && visualElement.render();
     });
-    React.useEffect(() => {
+    /**
+     * If we have optimised appear animations to handoff from, trigger animateChanges
+     * from a synchronous useLayoutEffect to ensure there's no flash of incorrectly
+     * styled component in the event of a hydration error.
+     */
+    useIsomorphicLayoutEffect(() => {
         if (visualElement && visualElement.animationState) {
             visualElement.animationState.animateChanges();
         }
@@ -2124,7 +2129,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.10.2";
+        this.version = "7.10.3";
         /**
          * Duration, in milliseconds, since last updating frame.
          *
@@ -5932,7 +5937,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "7.10.2", `Attempting to mix Framer Motion versions ${nextValue.version} with 7.10.2 may not work as expected.`);
+                warnOnce(nextValue.version === "7.10.3", `Attempting to mix Framer Motion versions ${nextValue.version} with 7.10.3 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {

package/dist/es/motion/utils/use-visual-element.mjs

@@ -1,4 +1,4 @@
-import { useContext, useRef, useEffect } from 'react';
+import { useContext, useRef } from 'react';
 import { PresenceContext } from '../../context/PresenceContext.mjs';
 import { useVisualElementContext } from '../../context/MotionContext/index.mjs';
 import { useIsomorphicLayoutEffect } from '../../utils/use-isomorphic-effect.mjs';
@@ -31,7 +31,12 @@ function useVisualElement(Component, visualState, props, createVisualElement) {
     useIsomorphicLayoutEffect(() => {
         visualElement && visualElement.render();
     });
-    useEffect(() => {
+    /**
+     * If we have optimised appear animations to handoff from, trigger animateChanges
+     * from a synchronous useLayoutEffect to ensure there's no flash of incorrectly
+     * styled component in the event of a hydration error.
+     */
+    useIsomorphicLayoutEffect(() => {
         if (visualElement && visualElement.animationState) {
             visualElement.animationState.animateChanges();
         }

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

package/dist/es/value/index.mjs

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

package/dist/framer-motion.dev.js

@@ -78,7 +78,12 @@
         useIsomorphicLayoutEffect(() => {
             visualElement && visualElement.render();
         });
-        React.useEffect(() => {
+        /**
+         * If we have optimised appear animations to handoff from, trigger animateChanges
+         * from a synchronous useLayoutEffect to ensure there's no flash of incorrectly
+         * styled component in the event of a hydration error.
+         */
+        useIsomorphicLayoutEffect(() => {
             if (visualElement && visualElement.animationState) {
                 visualElement.animationState.animateChanges();
             }
@@ -2122,7 +2127,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.10.2";
+            this.version = "7.10.3";
             /**
              * Duration, in milliseconds, since last updating frame.
              *
@@ -5945,7 +5950,7 @@
                  * and warn against mismatches.
                  */
                 {
-                    warnOnce(nextValue.version === "7.10.2", `Attempting to mix Framer Motion versions ${nextValue.version} with 7.10.2 may not work as expected.`);
+                    warnOnce(nextValue.version === "7.10.3", `Attempting to mix Framer Motion versions ${nextValue.version} with 7.10.3 may not work as expected.`);
                 }
             }
             else if (isMotionValue(prevValue)) {