framer-motion 9.1.7 → 10.0.0-alpha.1

package/dist/cjs/index.js

@@ -1635,33 +1635,10 @@ class InViewFeature extends Feature {
         this.hasEnteredView = false;
         this.isInView = false;
     }
-    /**
-     * TODO: Remove this in 10.0
-     */
-    viewportFallback() {
-        /**
-         * Fire this in an rAF because, at this point, the animation state
-         * won't have flushed for the first time and there's certain logic in
-         * there that behaves differently on the initial animation.
-         */
-        requestAnimationFrame(() => {
-            this.hasEnteredView = true;
-            const { onViewportEnter } = this.node.getProps();
-            onViewportEnter && onViewportEnter(null);
-            if (this.node.animationState) {
-                this.node.animationState.setActive("whileInView", true);
-            }
-        });
-    }
     startObserver() {
         this.unmount();
         const { viewport = {} } = this.node.getProps();
-        const { root, margin: rootMargin, amount = "some", once, fallback = true, } = viewport;
-        if (typeof IntersectionObserver === "undefined") {
-            if (fallback)
-                this.viewportFallback();
-            return;
-        }
+        const { root, margin: rootMargin, amount = "some", once } = viewport;
         const options = {
             root: root ? root.current : undefined,
             rootMargin,
@@ -1978,6 +1955,16 @@ function velocityPerSecond(velocity, frameDuration) {
     return frameDuration ? velocity * (1000 / frameDuration) : 0;
 }
 
+const warned = new Set();
+function warnOnce(condition, message, element) {
+    if (condition || warned.has(message))
+        return;
+    console.warn(message);
+    if (element)
+        console.warn(element);
+    warned.add(message);
+}
+
 const isFloat = (value) => {
     return !isNaN(parseFloat(value));
 };
@@ -2000,7 +1987,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 = "9.1.7";
+        this.version = "10.0.0-alpha.1";
         /**
          * Duration, in milliseconds, since last updating frame.
          *
@@ -2120,6 +2107,9 @@ class MotionValue {
      * @deprecated
      */
     onChange(subscription) {
+        if (process.env.NODE_ENV !== "production") {
+            warnOnce(false, `value.onChange(callback) is deprecated. Switch to value.on("change", callback).`);
+        }
         return this.on("change", subscription);
     }
     on(eventName, callback) {
@@ -3614,6 +3604,7 @@ const acceleratedValues = new Set([
     "clipPath",
     "filter",
     "transform",
+    "backgroundColor",
 ]);
 /**
  * 10ms is chosen here as it strikes a balance between smooth
@@ -3633,14 +3624,14 @@ function createAcceleratedAnimation(value, valueName, { onUpdate, onComplete, ..
     /**
      * If this animation needs pre-generated keyframes then generate.
      */
-    if (options.type === "spring" || !isWaapiSupportedEasing(options.ease)) {
-        /**
-         * If we need to pre-generate keyframes and repeat is infinite then
-         * early return as this will lock the thread.
-         */
-        if (options.repeat === Infinity)
-            return;
-        const sampleAnimation = animateValue({ ...options, elapsed: 0 });
+    if (options.type === "spring" ||
+        valueName === "backgroundColor" ||
+        !isWaapiSupportedEasing(options.ease)) {
+        const sampleAnimation = animateValue({
+            ...options,
+            repeat: 0,
+            elapsed: 0,
+        });
         let state = { done: false, value: keyframes[0] };
         const pregeneratedKeyframes = [];
         /**
@@ -7819,16 +7810,6 @@ function initPrefersReducedMotion() {
     }
 }
 
-const warned = new Set();
-function warnOnce(condition, message, element) {
-    if (condition || warned.has(message))
-        return;
-    console.warn(message);
-    if (element)
-        console.warn(element);
-    warned.add(message);
-}
-
 function updateMotionValuesFromProps(element, next, prev) {
     const { willChange } = next;
     for (const key in next) {
@@ -7848,7 +7829,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "9.1.7", `Attempting to mix Framer Motion versions ${nextValue.version} with 9.1.7 may not work as expected.`);
+                warnOnce(nextValue.version === "10.0.0-alpha.1", `Attempting to mix Framer Motion versions ${nextValue.version} with 10.0.0-alpha.1 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {
@@ -8926,13 +8907,7 @@ function onlyElements(children) {
  * @public
  */
 const AnimatePresence = ({ children, custom, initial = true, onExitComplete, exitBeforeEnter, presenceAffectsLayout = true, mode = "sync", }) => {
-    // Support deprecated exitBeforeEnter prop
-    if (exitBeforeEnter) {
-        mode = "wait";
-        if (process.env.NODE_ENV !== "production") {
-            warnOnce(false, "Replace exitBeforeEnter with mode='wait'");
-        }
-    }
+    exports.invariant(!exitBeforeEnter, "Replace exitBeforeEnter with mode='wait'");
     // We want to force a re-render once all exiting animations have finished. We
     // either use a local forceRender function, or one from a parent context if it exists.
     let [forceRender] = useForceUpdate();
@@ -9027,45 +9002,6 @@ const AnimatePresence = ({ children, custom, initial = true, onExitComplete, exi
         : childrenToRender.map((child) => React.cloneElement(child))));
 };
 
-/**
- * @deprecated
- */
-const DeprecatedLayoutGroupContext = React.createContext(null);
-
-const shouldInheritGroup = (inherit) => inherit === true;
-const shouldInheritId = (inherit) => shouldInheritGroup(inherit === true) || inherit === "id";
-const LayoutGroup = ({ children, id, inheritId, inherit = true }) => {
-    // Maintain backwards-compatibility with inheritId until 7.0
-    if (inheritId !== undefined)
-        inherit = inheritId;
-    const layoutGroupContext = React.useContext(LayoutGroupContext);
-    const deprecatedLayoutGroupContext = React.useContext(DeprecatedLayoutGroupContext);
-    const [forceRender, key] = useForceUpdate();
-    const context = React.useRef(null);
-    const upstreamId = layoutGroupContext.id || deprecatedLayoutGroupContext;
-    if (context.current === null) {
-        if (shouldInheritId(inherit) && upstreamId) {
-            id = id ? upstreamId + "-" + id : upstreamId;
-        }
-        context.current = {
-            id,
-            group: shouldInheritGroup(inherit)
-                ? layoutGroupContext.group || nodeGroup()
-                : nodeGroup(),
-        };
-    }
-    const memoizedContext = React.useMemo(() => ({ ...context.current, forceRender }), [key]);
-    return (React__namespace.createElement(LayoutGroupContext.Provider, { value: memoizedContext }, children));
-};
-
-let id = 0;
-const AnimateSharedLayout = ({ children }) => {
-    React__namespace.useEffect(() => {
-        exports.warning(false, "AnimateSharedLayout is deprecated: https://www.framer.com/docs/guide-upgrade/##shared-layout-animations");
-    }, []);
-    return (React__namespace.createElement(LayoutGroup, { id: useConstant(() => `asl-${id++}`) }, children));
-};
-
 /**
  * `MotionConfig` is used to set configuration options for all children `motion` components.
  *
@@ -9163,6 +9099,28 @@ function isLazyBundle(features) {
     return typeof features === "function";
 }
 
+const shouldInheritGroup = (inherit) => inherit === true;
+const shouldInheritId = (inherit) => shouldInheritGroup(inherit === true) || inherit === "id";
+const LayoutGroup = ({ children, id, inherit = true }) => {
+    const layoutGroupContext = React.useContext(LayoutGroupContext);
+    const [forceRender, key] = useForceUpdate();
+    const context = React.useRef(null);
+    const upstreamId = layoutGroupContext.id;
+    if (context.current === null) {
+        if (shouldInheritId(inherit) && upstreamId) {
+            id = id ? upstreamId + "-" + id : upstreamId;
+        }
+        context.current = {
+            id,
+            group: shouldInheritGroup(inherit)
+                ? layoutGroupContext.group || nodeGroup()
+                : nodeGroup(),
+        };
+    }
+    const memoizedContext = React.useMemo(() => ({ ...context.current, forceRender }), [key]);
+    return (React__namespace.createElement(LayoutGroupContext.Provider, { value: memoizedContext }, children));
+};
+
 const ReorderContext = React.createContext(null);
 
 function checkReorder(order, value, offset, velocity) {
@@ -10251,15 +10209,6 @@ const thresholds = {
     all: 1,
 };
 function inView(elementOrSelector, onStart, { root, margin: rootMargin, amount = "any" } = {}) {
-    /**
-     * If this browser doesn't support IntersectionObserver, return a dummy stop function.
-     * Default triggering of onStart is tricky - it could be used for starting/stopping
-     * videos, lazy loading content etc. We could provide an option to enable a fallback, or
-     * provide a fallback callback option.
-     */
-    if (typeof IntersectionObserver === "undefined") {
-        return () => { };
-    }
     const elements = resolveElements(elementOrSelector);
     const activeIntersections = new WeakMap();
     const onIntersectionChange = (entries) => {
@@ -10706,9 +10655,16 @@ function useInvertedScale(scale) {
     return { scaleX, scaleY };
 }
 
+let id = 0;
+const AnimateSharedLayout = ({ children }) => {
+    React__namespace.useEffect(() => {
+        exports.invariant(false, "AnimateSharedLayout is deprecated: https://www.framer.com/docs/guide-upgrade/##shared-layout-animations");
+    }, []);
+    return (React__namespace.createElement(LayoutGroup, { id: useConstant(() => `asl-${id++}`) }, children));
+};
+
 exports.AnimatePresence = AnimatePresence;
 exports.AnimateSharedLayout = AnimateSharedLayout;
-exports.DeprecatedLayoutGroupContext = DeprecatedLayoutGroupContext;
 exports.DragControls = DragControls;
 exports.FlatTree = FlatTree;
 exports.LayoutGroup = LayoutGroup;

package/dist/es/animation/waapi/create-accelerated-animation.mjs

@@ -13,6 +13,7 @@ const acceleratedValues = new Set([
     "clipPath",
     "filter",
     "transform",
+    "backgroundColor",
 ]);
 /**
  * 10ms is chosen here as it strikes a balance between smooth
@@ -32,14 +33,14 @@ function createAcceleratedAnimation(value, valueName, { onUpdate, onComplete, ..
     /**
      * If this animation needs pre-generated keyframes then generate.
      */
-    if (options.type === "spring" || !isWaapiSupportedEasing(options.ease)) {
-        /**
-         * If we need to pre-generate keyframes and repeat is infinite then
-         * early return as this will lock the thread.
-         */
-        if (options.repeat === Infinity)
-            return;
-        const sampleAnimation = animateValue({ ...options, elapsed: 0 });
+    if (options.type === "spring" ||
+        valueName === "backgroundColor" ||
+        !isWaapiSupportedEasing(options.ease)) {
+        const sampleAnimation = animateValue({
+            ...options,
+            repeat: 0,
+            elapsed: 0,
+        });
         let state = { done: false, value: keyframes[0] };
         const pregeneratedKeyframes = [];
         /**

package/dist/es/components/AnimatePresence/index.mjs

@@ -6,7 +6,7 @@ import { PresenceChild } from './PresenceChild.mjs';
 import { LayoutGroupContext } from '../../context/LayoutGroupContext.mjs';
 import { useIsomorphicLayoutEffect } from '../../utils/use-isomorphic-effect.mjs';
 import { useUnmountEffect } from '../../utils/use-unmount-effect.mjs';
-import { warnOnce } from '../../utils/warn-once.mjs';
+import { invariant } from '../../utils/errors.mjs';
 
 const getChildKey = (child) => child.key || "";
 function updateChildLookup(children, allChildren) {
@@ -58,13 +58,7 @@ function onlyElements(children) {
  * @public
  */
 const AnimatePresence = ({ children, custom, initial = true, onExitComplete, exitBeforeEnter, presenceAffectsLayout = true, mode = "sync", }) => {
-    // Support deprecated exitBeforeEnter prop
-    if (exitBeforeEnter) {
-        mode = "wait";
-        if (process.env.NODE_ENV !== "production") {
-            warnOnce(false, "Replace exitBeforeEnter with mode='wait'");
-        }
-    }
+    invariant(!exitBeforeEnter, "Replace exitBeforeEnter with mode='wait'");
     // We want to force a re-render once all exiting animations have finished. We
     // either use a local forceRender function, or one from a parent context if it exists.
     let [forceRender] = useForceUpdate();

package/dist/es/components/AnimateSharedLayout.mjs

@@ -1,4 +1,4 @@
-import { warning } from '../utils/errors.mjs';
+import { invariant } from '../utils/errors.mjs';
 import * as React from 'react';
 import { useConstant } from '../utils/use-constant.mjs';
 import { LayoutGroup } from './LayoutGroup/index.mjs';
@@ -6,7 +6,7 @@ import { LayoutGroup } from './LayoutGroup/index.mjs';
 let id = 0;
 const AnimateSharedLayout = ({ children }) => {
     React.useEffect(() => {
-        warning(false, "AnimateSharedLayout is deprecated: https://www.framer.com/docs/guide-upgrade/##shared-layout-animations");
+        invariant(false, "AnimateSharedLayout is deprecated: https://www.framer.com/docs/guide-upgrade/##shared-layout-animations");
     }, []);
     return (React.createElement(LayoutGroup, { id: useConstant(() => `asl-${id++}`) }, children));
 };

package/dist/es/components/LayoutGroup/index.mjs

@@ -1,21 +1,16 @@
 import * as React from 'react';
 import { useContext, useRef, useMemo } from 'react';
 import { LayoutGroupContext } from '../../context/LayoutGroupContext.mjs';
-import { DeprecatedLayoutGroupContext } from '../../context/DeprecatedLayoutGroupContext.mjs';
 import { useForceUpdate } from '../../utils/use-force-update.mjs';
 import { nodeGroup } from '../../projection/node/group.mjs';
 
 const shouldInheritGroup = (inherit) => inherit === true;
 const shouldInheritId = (inherit) => shouldInheritGroup(inherit === true) || inherit === "id";
-const LayoutGroup = ({ children, id, inheritId, inherit = true }) => {
-    // Maintain backwards-compatibility with inheritId until 7.0
-    if (inheritId !== undefined)
-        inherit = inheritId;
+const LayoutGroup = ({ children, id, inherit = true }) => {
     const layoutGroupContext = useContext(LayoutGroupContext);
-    const deprecatedLayoutGroupContext = useContext(DeprecatedLayoutGroupContext);
     const [forceRender, key] = useForceUpdate();
     const context = useRef(null);
-    const upstreamId = layoutGroupContext.id || deprecatedLayoutGroupContext;
+    const upstreamId = layoutGroupContext.id;
     if (context.current === null) {
         if (shouldInheritId(inherit) && upstreamId) {
             id = id ? upstreamId + "-" + id : upstreamId;

package/dist/es/index.mjs

@@ -1,7 +1,6 @@
 export { createDomMotionComponent, motion } from './render/dom/motion.mjs';
 export { m } from './render/dom/motion-minimal.mjs';
 export { AnimatePresence } from './components/AnimatePresence/index.mjs';
-export { AnimateSharedLayout } from './components/AnimateSharedLayout.mjs';
 export { MotionConfig } from './components/MotionConfig/index.mjs';
 export { LazyMotion } from './components/LazyMotion/index.mjs';
 export { LayoutGroup } from './components/LayoutGroup/index.mjs';
@@ -68,7 +67,6 @@ export { MotionContext, useVisualElementContext } from './context/MotionContext/
 export { MotionConfigContext } from './context/MotionConfigContext.mjs';
 export { PresenceContext } from './context/PresenceContext.mjs';
 export { LayoutGroupContext } from './context/LayoutGroupContext.mjs';
-export { DeprecatedLayoutGroupContext } from './context/DeprecatedLayoutGroupContext.mjs';
 export { SwitchLayoutGroupContext } from './context/SwitchLayoutGroupContext.mjs';
 export { anticipate } from './easing/anticipate.mjs';
 export { backIn, backInOut, backOut } from './easing/back.mjs';
@@ -78,6 +76,7 @@ export { cubicBezier } from './easing/cubic-bezier.mjs';
 export { FlatTree } from './render/utils/flat-tree.mjs';
 export { useAnimatedState as useDeprecatedAnimatedState } from './animation/hooks/use-animated-state.mjs';
 export { useInvertedScale as useDeprecatedInvertedScale } from './value/use-inverted-scale.mjs';
+export { AnimateSharedLayout } from './components/AnimateSharedLayout.mjs';
 export { animations } from './motion/features/animations.mjs';
 export { checkTargetForNewValues } from './render/utils/setters.mjs';
 export { createBox } from './projection/geometry/models.mjs';

package/dist/es/motion/features/viewport/index.mjs

@@ -11,33 +11,10 @@ class InViewFeature extends Feature {
         this.hasEnteredView = false;
         this.isInView = false;
     }
-    /**
-     * TODO: Remove this in 10.0
-     */
-    viewportFallback() {
-        /**
-         * Fire this in an rAF because, at this point, the animation state
-         * won't have flushed for the first time and there's certain logic in
-         * there that behaves differently on the initial animation.
-         */
-        requestAnimationFrame(() => {
-            this.hasEnteredView = true;
-            const { onViewportEnter } = this.node.getProps();
-            onViewportEnter && onViewportEnter(null);
-            if (this.node.animationState) {
-                this.node.animationState.setActive("whileInView", true);
-            }
-        });
-    }
     startObserver() {
         this.unmount();
         const { viewport = {} } = this.node.getProps();
-        const { root, margin: rootMargin, amount = "some", once, fallback = true, } = viewport;
-        if (typeof IntersectionObserver === "undefined") {
-            if (fallback)
-                this.viewportFallback();
-            return;
-        }
+        const { root, margin: rootMargin, amount = "some", once } = viewport;
         const options = {
             root: root ? root.current : undefined,
             rootMargin,

package/dist/es/render/dom/viewport/index.mjs

@@ -5,15 +5,6 @@ const thresholds = {
     all: 1,
 };
 function inView(elementOrSelector, onStart, { root, margin: rootMargin, amount = "any" } = {}) {
-    /**
-     * If this browser doesn't support IntersectionObserver, return a dummy stop function.
-     * Default triggering of onStart is tricky - it could be used for starting/stopping
-     * videos, lazy loading content etc. We could provide an option to enable a fallback, or
-     * provide a fallback callback option.
-     */
-    if (typeof IntersectionObserver === "undefined") {
-        return () => { };
-    }
     const elements = resolveElements(elementOrSelector);
     const activeIntersections = new WeakMap();
     const onIntersectionChange = (entries) => {

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

package/dist/es/value/index.mjs

@@ -2,6 +2,7 @@ import { frameData } from '../frameloop/data.mjs';
 import { sync } from '../frameloop/index.mjs';
 import { SubscriptionManager } from '../utils/subscription-manager.mjs';
 import { velocityPerSecond } from '../utils/velocity-per-second.mjs';
+import { warnOnce } from '../utils/warn-once.mjs';
 
 const isFloat = (value) => {
     return !isNaN(parseFloat(value));
@@ -25,7 +26,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 = "9.1.7";
+        this.version = "10.0.0-alpha.1";
         /**
          * Duration, in milliseconds, since last updating frame.
          *
@@ -145,6 +146,9 @@ class MotionValue {
      * @deprecated
      */
     onChange(subscription) {
+        if (process.env.NODE_ENV !== "production") {
+            warnOnce(false, `value.onChange(callback) is deprecated. Switch to value.on("change", callback).`);
+        }
         return this.on("change", subscription);
     }
     on(eventName, callback) {