framer-motion 8.2.0 → 8.2.2

package/dist/cjs/index.js

@@ -2055,7 +2055,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 = "8.2.0";
+        this.version = "8.2.2";
         /**
          * Duration, in milliseconds, since last updating frame.
          *
@@ -5911,7 +5911,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "8.2.0", `Attempting to mix Framer Motion versions ${nextValue.version} with 8.2.0 may not work as expected.`);
+                warnOnce(nextValue.version === "8.2.2", `Attempting to mix Framer Motion versions ${nextValue.version} with 8.2.2 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {
@@ -9439,11 +9439,6 @@ function animationControls() {
      * Track whether the host component has mounted.
      */
     let hasMounted = false;
-    /**
-     * Pending animations that are started before a component is mounted.
-     * TODO: Remove this as animations should only run in effects
-     */
-    const pendingAnimations = [];
     /**
      * A collection of linked component animation controls.
      */
@@ -9454,29 +9449,14 @@ function animationControls() {
             return () => void subscribers.delete(visualElement);
         },
         start(definition, transitionOverride) {
-            /**
-             * TODO: We only perform this hasMounted check because in Framer we used to
-             * encourage the ability to start an animation within the render phase. This
-             * isn't behaviour concurrent-safe so when we make Framer concurrent-safe
-             * we can ditch this.
-             */
-            if (hasMounted) {
-                const animations = [];
-                subscribers.forEach((visualElement) => {
-                    animations.push(animateVisualElement(visualElement, definition, {
-                        transitionOverride,
-                    }));
-                });
-                return Promise.all(animations);
-            }
-            else {
-                return new Promise((resolve) => {
-                    pendingAnimations.push({
-                        animation: [definition, transitionOverride],
-                        resolve,
-                    });
-                });
-            }
+            heyListen.invariant(hasMounted, "controls.start() should only be called after a component has mounted. Consider calling within a useEffect hook.");
+            const animations = [];
+            subscribers.forEach((visualElement) => {
+                animations.push(animateVisualElement(visualElement, definition, {
+                    transitionOverride,
+                }));
+            });
+            return Promise.all(animations);
         },
         set(definition) {
             heyListen.invariant(hasMounted, "controls.set() should only be called after a component has mounted. Consider calling within a useEffect hook.");
@@ -9491,9 +9471,6 @@ function animationControls() {
         },
         mount() {
             hasMounted = true;
-            pendingAnimations.forEach(({ animation, resolve }) => {
-                controls.start(...animation).then(resolve);
-            });
             return () => {
                 hasMounted = false;
                 controls.stop();
@@ -9534,7 +9511,7 @@ function animationControls() {
  */
 function useAnimationControls() {
     const controls = useConstant(animationControls);
-    React.useEffect(controls.mount, []);
+    useIsomorphicLayoutEffect(controls.mount, []);
     return controls;
 }
 const useAnimation = useAnimationControls;

package/dist/es/animation/hooks/animation-controls.mjs

@@ -1,5 +1,5 @@
 import { invariant } from 'hey-listen';
-import { stopAnimation, animateVisualElement } from '../../render/utils/animation.mjs';
+import { animateVisualElement, stopAnimation } from '../../render/utils/animation.mjs';
 import { setValues } from '../../render/utils/setters.mjs';
 
 /**
@@ -10,11 +10,6 @@ function animationControls() {
      * Track whether the host component has mounted.
      */
     let hasMounted = false;
-    /**
-     * Pending animations that are started before a component is mounted.
-     * TODO: Remove this as animations should only run in effects
-     */
-    const pendingAnimations = [];
     /**
      * A collection of linked component animation controls.
      */
@@ -25,29 +20,14 @@ function animationControls() {
             return () => void subscribers.delete(visualElement);
         },
         start(definition, transitionOverride) {
-            /**
-             * TODO: We only perform this hasMounted check because in Framer we used to
-             * encourage the ability to start an animation within the render phase. This
-             * isn't behaviour concurrent-safe so when we make Framer concurrent-safe
-             * we can ditch this.
-             */
-            if (hasMounted) {
-                const animations = [];
-                subscribers.forEach((visualElement) => {
-                    animations.push(animateVisualElement(visualElement, definition, {
-                        transitionOverride,
-                    }));
-                });
-                return Promise.all(animations);
-            }
-            else {
-                return new Promise((resolve) => {
-                    pendingAnimations.push({
-                        animation: [definition, transitionOverride],
-                        resolve,
-                    });
-                });
-            }
+            invariant(hasMounted, "controls.start() should only be called after a component has mounted. Consider calling within a useEffect hook.");
+            const animations = [];
+            subscribers.forEach((visualElement) => {
+                animations.push(animateVisualElement(visualElement, definition, {
+                    transitionOverride,
+                }));
+            });
+            return Promise.all(animations);
         },
         set(definition) {
             invariant(hasMounted, "controls.set() should only be called after a component has mounted. Consider calling within a useEffect hook.");
@@ -62,9 +42,6 @@ function animationControls() {
         },
         mount() {
             hasMounted = true;
-            pendingAnimations.forEach(({ animation, resolve }) => {
-                controls.start(...animation).then(resolve);
-            });
             return () => {
                 hasMounted = false;
                 controls.stop();

package/dist/es/animation/hooks/use-animation.mjs

@@ -1,6 +1,6 @@
 import { animationControls } from './animation-controls.mjs';
-import { useEffect } from 'react';
 import { useConstant } from '../../utils/use-constant.mjs';
+import { useIsomorphicLayoutEffect } from '../../utils/use-isomorphic-effect.mjs';
 
 /**
  * Creates `AnimationControls`, which can be used to manually start, stop
@@ -33,7 +33,7 @@ import { useConstant } from '../../utils/use-constant.mjs';
  */
 function useAnimationControls() {
     const controls = useConstant(animationControls);
-    useEffect(controls.mount, []);
+    useIsomorphicLayoutEffect(controls.mount, []);
     return controls;
 }
 const useAnimation = useAnimationControls;

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 === "8.2.0", `Attempting to mix Framer Motion versions ${nextValue.version} with 8.2.0 may not work as expected.`);
+                warnOnce(nextValue.version === "8.2.2", `Attempting to mix Framer Motion versions ${nextValue.version} with 8.2.2 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 = "8.2.0";
+        this.version = "8.2.2";
         /**
          * Duration, in milliseconds, since last updating frame.
          *

package/dist/framer-motion.dev.js

@@ -2053,7 +2053,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 = "8.2.0";
+            this.version = "8.2.2";
             /**
              * Duration, in milliseconds, since last updating frame.
              *
@@ -5924,7 +5924,7 @@
                  * and warn against mismatches.
                  */
                 {
-                    warnOnce(nextValue.version === "8.2.0", `Attempting to mix Framer Motion versions ${nextValue.version} with 8.2.0 may not work as expected.`);
+                    warnOnce(nextValue.version === "8.2.2", `Attempting to mix Framer Motion versions ${nextValue.version} with 8.2.2 may not work as expected.`);
                 }
             }
             else if (isMotionValue(prevValue)) {
@@ -10058,11 +10058,6 @@
          * Track whether the host component has mounted.
          */
         let hasMounted = false;
-        /**
-         * Pending animations that are started before a component is mounted.
-         * TODO: Remove this as animations should only run in effects
-         */
-        const pendingAnimations = [];
         /**
          * A collection of linked component animation controls.
          */
@@ -10073,29 +10068,14 @@
                 return () => void subscribers.delete(visualElement);
             },
             start(definition, transitionOverride) {
-                /**
-                 * TODO: We only perform this hasMounted check because in Framer we used to
-                 * encourage the ability to start an animation within the render phase. This
-                 * isn't behaviour concurrent-safe so when we make Framer concurrent-safe
-                 * we can ditch this.
-                 */
-                if (hasMounted) {
-                    const animations = [];
-                    subscribers.forEach((visualElement) => {
-                        animations.push(animateVisualElement(visualElement, definition, {
-                            transitionOverride,
-                        }));
-                    });
-                    return Promise.all(animations);
-                }
-                else {
-                    return new Promise((resolve) => {
-                        pendingAnimations.push({
-                            animation: [definition, transitionOverride],
-                            resolve,
-                        });
-                    });
-                }
+                invariant(hasMounted, "controls.start() should only be called after a component has mounted. Consider calling within a useEffect hook.");
+                const animations = [];
+                subscribers.forEach((visualElement) => {
+                    animations.push(animateVisualElement(visualElement, definition, {
+                        transitionOverride,
+                    }));
+                });
+                return Promise.all(animations);
             },
             set(definition) {
                 invariant(hasMounted, "controls.set() should only be called after a component has mounted. Consider calling within a useEffect hook.");
@@ -10110,9 +10090,6 @@
             },
             mount() {
                 hasMounted = true;
-                pendingAnimations.forEach(({ animation, resolve }) => {
-                    controls.start(...animation).then(resolve);
-                });
                 return () => {
                     hasMounted = false;
                     controls.stop();
@@ -10153,7 +10130,7 @@
      */
     function useAnimationControls() {
         const controls = useConstant(animationControls);
-        React.useEffect(controls.mount, []);
+        useIsomorphicLayoutEffect(controls.mount, []);
         return controls;
     }
     const useAnimation = useAnimationControls;