framer-motion 6.1.0 → 6.2.4

package/dist/cjs/index.js

@@ -120,6 +120,7 @@ function useFeatures(props, visualElement, preloadedFeatures) {
 var MotionConfigContext = React.createContext({
     transformPagePoint: function (p) { return p; },
     isStatic: false,
+    reducedMotion: "never",
 });
 
 var MotionContext = React.createContext({});
@@ -136,10 +137,81 @@ var isBrowser = typeof window !== "undefined";
 
 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 = tslib.__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
@@ -153,6 +225,7 @@ function useVisualElement(Component, visualState, props, createVisualElement) {
             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;
@@ -1824,9 +1897,6 @@ function createProjectionNode(_a) {
             };
             this.hasProjected = false;
             this.isVisible = true;
-            /**
-             * Animation
-             */
             this.animationProgress = 0;
             /**
              * Shared layout
@@ -1943,9 +2013,23 @@ function createProjectionNode(_a) {
                             _this.resumingFrom.resumingFrom = undefined;
                         }
                         _this.setAnimationOrigin(delta, hasOnlyRelativeTargetChanged);
-                        _this.startAnimation(tslib.__assign(tslib.__assign({}, getValueTransition(layoutTransition, "layout")), { onComplete: onLayoutAnimationComplete }));
+                        var animationOptions = tslib.__assign(tslib.__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;
@@ -2435,6 +2519,7 @@ function createProjectionNode(_a) {
                 !isOnlyMember &&
                 this.options.crossfade === true &&
                 !this.path.some(hasOpacityCrossfade));
+            this.animationProgress = 0;
             this.mixTargetDelta = function (latest) {
                 var _a;
                 var progress = latest / 1000;
@@ -2454,6 +2539,7 @@ function createProjectionNode(_a) {
                 }
                 _this.root.scheduleUpdateProjection();
                 _this.scheduleRender();
+                _this.animationProgress = progress;
             };
             this.mixTargetDelta(0);
         };
@@ -2819,6 +2905,10 @@ function clearMeasurements(node) {
     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) {
@@ -4572,7 +4662,14 @@ function animateTarget(visualElement, definition, _a) {
                 shouldBlockAnimation(animationTypeState, key))) {
             continue;
         }
-        var animation = startAnimation(key, value, valueTarget, tslib.__assign({ delay: delay }, transition));
+        var valueTransition = tslib.__assign({ delay: delay }, transition);
+        /**
+         * Make animation instant if this is a transform prop and we should reduce motion.
+         */
+        if (visualElement.shouldReduceMotion && isTransformProp(key)) {
+            valueTransition = tslib.__assign(tslib.__assign({}, valueTransition), { type: false, delay: 0 });
+        }
+        var animation = startAnimation(key, value, valueTarget, valueTransition);
         animations.push(animation);
     }
     return Promise.all(animations).then(function () {
@@ -5818,7 +5915,7 @@ function createLifecycles() {
             for (var _i = 0; _i < arguments.length; _i++) {
                 args[_i] = arguments[_i];
             }
-            manager.notify.apply(manager, tslib.__spreadArray([], tslib.__read(args), false));
+            return manager.notify.apply(manager, tslib.__spreadArray([], tslib.__read(args), false));
         };
     });
     return lifecycles;
@@ -5870,7 +5967,7 @@ function updateMotionValuesFromProps(element, next, prev) {
 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;
@@ -5979,7 +6076,7 @@ var visualElement = function (_a) {
             /**
              *
              */
-            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
@@ -7875,60 +7972,6 @@ function useTime() {
     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 = tslib.__read(React.useState(prefersReducedMotion.get()), 2), shouldReduceMotion = _a[0], setShouldReduceMotion = _a[1];
-    useOnChange(prefersReducedMotion, setShouldReduceMotion);
-    return shouldReduceMotion;
-}
-
 /**
  * @public
  */
@@ -8363,6 +8406,7 @@ exports.useMotionTemplate = useMotionTemplate;
 exports.useMotionValue = useMotionValue;
 exports.usePresence = usePresence;
 exports.useReducedMotion = useReducedMotion;
+exports.useReducedMotionConfig = useReducedMotionConfig;
 exports.useResetProjection = useResetProjection;
 exports.useSpring = useSpring;
 exports.useTime = useTime;

package/dist/es/context/MotionConfigContext.mjs

@@ -6,6 +6,7 @@ import { createContext } from 'react';
 var MotionConfigContext = createContext({
     transformPagePoint: function (p) { return p; },
     isStatic: false,
+    reducedMotion: "never",
 });
 
 export { MotionConfigContext };

package/dist/es/index.mjs

@@ -18,7 +18,7 @@ export { useVelocity } from './value/use-velocity.mjs';
 export { useElementScroll } from './value/scroll/use-element-scroll.mjs';
 export { useViewportScroll } from './value/scroll/use-viewport-scroll.mjs';
 export { useTime } from './value/use-time.mjs';
-export { useReducedMotion } from './utils/use-reduced-motion.mjs';
+export { useReducedMotion, useReducedMotionConfig } from './utils/use-reduced-motion.mjs';
 export { animationControls } from './animation/animation-controls.mjs';
 export { useAnimation } from './animation/use-animation.mjs';
 export { useAnimationFrame } from './utils/use-animation-frame.mjs';

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

@@ -3,11 +3,13 @@ import { PresenceContext } from '../../context/PresenceContext.mjs';
 import { useVisualElementContext } from '../../context/MotionContext/index.mjs';
 import { useIsomorphicLayoutEffect } from '../../utils/use-isomorphic-effect.mjs';
 import { LazyContext } from '../../context/LazyContext.mjs';
+import { useReducedMotionConfig } from '../../utils/use-reduced-motion.mjs';
 
 function useVisualElement(Component, visualState, props, createVisualElement) {
     var lazyContext = useContext(LazyContext);
     var parent = useVisualElementContext();
     var presenceContext = useContext(PresenceContext);
+    var shouldReduceMotion = useReducedMotionConfig();
     var visualElementRef = useRef(undefined);
     /**
      * If we haven't preloaded a renderer, check to see if we have one lazy-loaded
@@ -21,6 +23,7 @@ function useVisualElement(Component, visualState, props, createVisualElement) {
             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;

package/dist/es/projection/node/create-projection-node.mjs

@@ -125,9 +125,6 @@ function createProjectionNode(_a) {
             };
             this.hasProjected = false;
             this.isVisible = true;
-            /**
-             * Animation
-             */
             this.animationProgress = 0;
             /**
              * Shared layout
@@ -244,9 +241,23 @@ function createProjectionNode(_a) {
                             _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;
@@ -736,6 +747,7 @@ function createProjectionNode(_a) {
                 !isOnlyMember &&
                 this.options.crossfade === true &&
                 !this.path.some(hasOpacityCrossfade));
+            this.animationProgress = 0;
             this.mixTargetDelta = function (latest) {
                 var _a;
                 var progress = latest / 1000;
@@ -755,6 +767,7 @@ function createProjectionNode(_a) {
                 }
                 _this.root.scheduleUpdateProjection();
                 _this.scheduleRender();
+                _this.animationProgress = progress;
             };
             this.mixTargetDelta(0);
         };
@@ -1120,6 +1133,10 @@ function clearMeasurements(node) {
     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) {

package/dist/es/render/index.mjs

@@ -10,7 +10,7 @@ import { checkIfControllingVariants, checkIfVariantNode, isVariantLabel } from '
 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;
@@ -119,7 +119,7 @@ var visualElement = function (_a) {
             /**
              *
              */
-            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

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

@@ -2,6 +2,7 @@ import { __read, __rest, __assign } from 'tslib';
 import { startAnimation } from '../../animation/utils/transitions.mjs';
 import { setTarget } from './setters.mjs';
 import { resolveVariant } from './variants.mjs';
+import { isTransformProp } from '../html/utils/transform.mjs';
 
 /**
  * @internal
@@ -90,7 +91,14 @@ function animateTarget(visualElement, definition, _a) {
                 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 () {

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

@@ -40,7 +40,7 @@ function createLifecycles() {
             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;

package/dist/es/utils/use-reduced-motion.mjs

@@ -1,24 +1,24 @@
 import { __read } from 'tslib';
-import { useState } from 'react';
-import { motionValue } from '../value/index.mjs';
-import { useOnChange } from '../value/use-on-change.mjs';
+import { useState, useContext } from 'react';
+import { MotionConfigContext } from '../context/MotionConfigContext.mjs';
 
 // Does this device prefer reduced motion? Returns `null` server-side.
-var prefersReducedMotion;
+var prefersReducedMotion = { current: null };
+var hasDetected = false;
 function initPrefersReducedMotion() {
-    prefersReducedMotion = motionValue(null);
+    hasDetected = true;
     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);
+            return (prefersReducedMotion.current = motionMediaQuery_1.matches);
         };
         motionMediaQuery_1.addListener(setReducedMotionPreferences);
         setReducedMotionPreferences();
     }
     else {
-        prefersReducedMotion.set(false);
+        prefersReducedMotion.current = false;
     }
 }
 /**
@@ -51,10 +51,25 @@ function useReducedMotion() {
     /**
      * Lazy initialisation of prefersReducedMotion
      */
-    !prefersReducedMotion && initPrefersReducedMotion();
-    var _a = __read(useState(prefersReducedMotion.get()), 2), shouldReduceMotion = _a[0], setShouldReduceMotion = _a[1];
-    useOnChange(prefersReducedMotion, setShouldReduceMotion);
+    !hasDetected && initPrefersReducedMotion();
+    var _a = __read(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 = useContext(MotionConfigContext).reducedMotion;
+    if (reducedMotion === "never") {
+        return false;
+    }
+    else if (reducedMotion === "always") {
+        return true;
+    }
+    else {
+        return reducedMotionPreference;
+    }
+}
 
-export { useReducedMotion };
+export { useReducedMotion, useReducedMotionConfig };