framer-motion 6.1.0 → 6.2.4

package/dist/framer-motion.dev.js

@@ -221,6 +221,7 @@
     var MotionConfigContext = React.createContext({
         transformPagePoint: function (p) { return p; },
         isStatic: false,
+        reducedMotion: "never",
     });
 
     var MotionContext = React.createContext({});
@@ -237,10 +238,81 @@
 
     var useIsomorphicLayoutEffect = isBrowser ? React.useLayoutEffect : React.useEffect;
 
+    // Does this device prefer reduced motion? Returns `null` server-side.
+    var prefersReducedMotion = { current: null };
+    var hasDetected = false;
+    function initPrefersReducedMotion() {
+        hasDetected = true;
+        if (typeof window === "undefined")
+            return;
+        if (window.matchMedia) {
+            var motionMediaQuery_1 = window.matchMedia("(prefers-reduced-motion)");
+            var setReducedMotionPreferences = function () {
+                return (prefersReducedMotion.current = motionMediaQuery_1.matches);
+            };
+            motionMediaQuery_1.addListener(setReducedMotionPreferences);
+            setReducedMotionPreferences();
+        }
+        else {
+            prefersReducedMotion.current = false;
+        }
+    }
+    /**
+     * A hook that returns `true` if we should be using reduced motion based on the current device's Reduced Motion setting.
+     *
+     * This can be used to implement changes to your UI based on Reduced Motion. For instance, replacing motion-sickness inducing
+     * `x`/`y` animations with `opacity`, disabling the autoplay of background videos, or turning off parallax motion.
+     *
+     * It will actively respond to changes and re-render your components with the latest setting.
+     *
+     * ```jsx
+     * export function Sidebar({ isOpen }) {
+     *   const shouldReduceMotion = useReducedMotion()
+     *   const closedX = shouldReduceMotion ? 0 : "-100%"
+     *
+     *   return (
+     *     <motion.div animate={{
+     *       opacity: isOpen ? 1 : 0,
+     *       x: isOpen ? 0 : closedX
+     *     }} />
+     *   )
+     * }
+     * ```
+     *
+     * @return boolean
+     *
+     * @public
+     */
+    function useReducedMotion() {
+        /**
+         * Lazy initialisation of prefersReducedMotion
+         */
+        !hasDetected && initPrefersReducedMotion();
+        var _a = __read(React.useState(prefersReducedMotion.current), 1), shouldReduceMotion = _a[0];
+        /**
+         * TODO See if people miss automatically updating shouldReduceMotion setting
+         */
+        return shouldReduceMotion;
+    }
+    function useReducedMotionConfig() {
+        var reducedMotionPreference = useReducedMotion();
+        var reducedMotion = React.useContext(MotionConfigContext).reducedMotion;
+        if (reducedMotion === "never") {
+            return false;
+        }
+        else if (reducedMotion === "always") {
+            return true;
+        }
+        else {
+            return reducedMotionPreference;
+        }
+    }
+
     function useVisualElement(Component, visualState, props, createVisualElement) {
         var lazyContext = React.useContext(LazyContext);
         var parent = useVisualElementContext();
         var presenceContext = React.useContext(PresenceContext);
+        var shouldReduceMotion = useReducedMotionConfig();
         var visualElementRef = React.useRef(undefined);
         /**
          * If we haven't preloaded a renderer, check to see if we have one lazy-loaded
@@ -254,6 +326,7 @@
                 props: props,
                 presenceId: presenceContext === null || presenceContext === void 0 ? void 0 : presenceContext.id,
                 blockInitialAnimation: (presenceContext === null || presenceContext === void 0 ? void 0 : presenceContext.initial) === false,
+                shouldReduceMotion: shouldReduceMotion,
             });
         }
         var visualElement = visualElementRef.current;
@@ -3057,9 +3130,6 @@
                 };
                 this.hasProjected = false;
                 this.isVisible = true;
-                /**
-                 * Animation
-                 */
                 this.animationProgress = 0;
                 /**
                  * Shared layout
@@ -3176,9 +3246,23 @@
                                 _this.resumingFrom.resumingFrom = undefined;
                             }
                             _this.setAnimationOrigin(delta, hasOnlyRelativeTargetChanged);
-                            _this.startAnimation(__assign(__assign({}, getValueTransition(layoutTransition, "layout")), { onComplete: onLayoutAnimationComplete }));
+                            var animationOptions = __assign(__assign({}, getValueTransition(layoutTransition, "layout")), { onComplete: onLayoutAnimationComplete });
+                            if (visualElement.shouldReduceMotion) {
+                                animationOptions.delay = 0;
+                                animationOptions.type = false;
+                            }
+                            _this.startAnimation(animationOptions);
                         }
                         else {
+                            /**
+                             * If the layout hasn't changed and we have an animation that hasn't started yet,
+                             * finish it immediately. Otherwise it will be animating from a location
+                             * that was probably never commited to screen and look like a jumpy box.
+                             */
+                            if (!hasLayoutChanged &&
+                                _this.animationProgress === 0) {
+                                _this.finishAnimation();
+                            }
                             _this.isLead() && ((_f = (_e = _this.options).onExitComplete) === null || _f === void 0 ? void 0 : _f.call(_e));
                         }
                         _this.targetLayout = newLayout;
@@ -3668,6 +3752,7 @@
                     !isOnlyMember &&
                     this.options.crossfade === true &&
                     !this.path.some(hasOpacityCrossfade));
+                this.animationProgress = 0;
                 this.mixTargetDelta = function (latest) {
                     var _a;
                     var progress = latest / 1000;
@@ -3687,6 +3772,7 @@
                     }
                     _this.root.scheduleUpdateProjection();
                     _this.scheduleRender();
+                    _this.animationProgress = progress;
                 };
                 this.mixTargetDelta(0);
             };
@@ -4052,6 +4138,10 @@
         node.clearMeasurements();
     }
     function resetTransformStyle(node) {
+        var visualElement = node.options.visualElement;
+        if (visualElement === null || visualElement === void 0 ? void 0 : visualElement.getProps().onBeforeLayoutMeasure) {
+            visualElement.notifyBeforeLayoutMeasure();
+        }
         node.resetTransform();
     }
     function finishAnimation(node) {
@@ -5805,7 +5895,14 @@
                     shouldBlockAnimation(animationTypeState, key))) {
                 continue;
             }
-            var animation = startAnimation(key, value, valueTarget, __assign({ delay: delay }, transition));
+            var valueTransition = __assign({ delay: delay }, transition);
+            /**
+             * Make animation instant if this is a transform prop and we should reduce motion.
+             */
+            if (visualElement.shouldReduceMotion && isTransformProp(key)) {
+                valueTransition = __assign(__assign({}, valueTransition), { type: false, delay: 0 });
+            }
+            var animation = startAnimation(key, value, valueTarget, valueTransition);
             animations.push(animation);
         }
         return Promise.all(animations).then(function () {
@@ -7051,7 +7148,7 @@
                 for (var _i = 0; _i < arguments.length; _i++) {
                     args[_i] = arguments[_i];
                 }
-                manager.notify.apply(manager, __spreadArray([], __read(args), false));
+                return manager.notify.apply(manager, __spreadArray([], __read(args), false));
             };
         });
         return lifecycles;
@@ -7103,7 +7200,7 @@
     var visualElement = function (_a) {
         var _b = _a.treeType, treeType = _b === void 0 ? "" : _b, build = _a.build, getBaseTarget = _a.getBaseTarget, makeTargetAnimatable = _a.makeTargetAnimatable, measureViewportBox = _a.measureViewportBox, renderInstance = _a.render, readValueFromInstance = _a.readValueFromInstance, removeValueFromRenderState = _a.removeValueFromRenderState, sortNodePosition = _a.sortNodePosition, scrapeMotionValuesFromProps = _a.scrapeMotionValuesFromProps;
         return function (_a, options) {
-            var parent = _a.parent, props = _a.props, presenceId = _a.presenceId, blockInitialAnimation = _a.blockInitialAnimation, visualState = _a.visualState;
+            var parent = _a.parent, props = _a.props, presenceId = _a.presenceId, blockInitialAnimation = _a.blockInitialAnimation, visualState = _a.visualState, shouldReduceMotion = _a.shouldReduceMotion;
             if (options === void 0) { options = {}; }
             var isMounted = false;
             var latestValues = visualState.latestValues, renderState = visualState.renderState;
@@ -7212,7 +7309,7 @@
                 /**
                  *
                  */
-                presenceId: presenceId, 
+                presenceId: presenceId, shouldReduceMotion: shouldReduceMotion, 
                 /**
                  * If this component is part of the variant tree, it should track
                  * any children that are also part of the tree. This is essentially
@@ -9107,60 +9204,6 @@
         return time;
     }
 
-    // Does this device prefer reduced motion? Returns `null` server-side.
-    var prefersReducedMotion;
-    function initPrefersReducedMotion() {
-        prefersReducedMotion = motionValue(null);
-        if (typeof window === "undefined")
-            return;
-        if (window.matchMedia) {
-            var motionMediaQuery_1 = window.matchMedia("(prefers-reduced-motion)");
-            var setReducedMotionPreferences = function () {
-                return prefersReducedMotion.set(motionMediaQuery_1.matches);
-            };
-            motionMediaQuery_1.addListener(setReducedMotionPreferences);
-            setReducedMotionPreferences();
-        }
-        else {
-            prefersReducedMotion.set(false);
-        }
-    }
-    /**
-     * A hook that returns `true` if we should be using reduced motion based on the current device's Reduced Motion setting.
-     *
-     * This can be used to implement changes to your UI based on Reduced Motion. For instance, replacing motion-sickness inducing
-     * `x`/`y` animations with `opacity`, disabling the autoplay of background videos, or turning off parallax motion.
-     *
-     * It will actively respond to changes and re-render your components with the latest setting.
-     *
-     * ```jsx
-     * export function Sidebar({ isOpen }) {
-     *   const shouldReduceMotion = useReducedMotion()
-     *   const closedX = shouldReduceMotion ? 0 : "-100%"
-     *
-     *   return (
-     *     <motion.div animate={{
-     *       opacity: isOpen ? 1 : 0,
-     *       x: isOpen ? 0 : closedX
-     *     }} />
-     *   )
-     * }
-     * ```
-     *
-     * @return boolean
-     *
-     * @public
-     */
-    function useReducedMotion() {
-        /**
-         * Lazy initialisation of prefersReducedMotion
-         */
-        !prefersReducedMotion && initPrefersReducedMotion();
-        var _a = __read(React.useState(prefersReducedMotion.get()), 2), shouldReduceMotion = _a[0], setShouldReduceMotion = _a[1];
-        useOnChange(prefersReducedMotion, setShouldReduceMotion);
-        return shouldReduceMotion;
-    }
-
     /**
      * @public
      */
@@ -9595,6 +9638,7 @@
     exports.useMotionValue = useMotionValue;
     exports.usePresence = usePresence;
     exports.useReducedMotion = useReducedMotion;
+    exports.useReducedMotionConfig = useReducedMotionConfig;
     exports.useResetProjection = useResetProjection;
     exports.useSpring = useSpring;
     exports.useTime = useTime;