framer-motion 9.1.6 → 10.0.0-alpha.0

package/dist/cjs/index.js

@@ -150,16 +150,16 @@ function isAnimationControls(v) {
     return typeof v === "object" && typeof v.start === "function";
 }
 
-const variantPriorityOrder$1 = [
-    "animate" /* AnimationType.Animate */,
-    "whileInView" /* AnimationType.InView */,
-    "whileFocus" /* AnimationType.Focus */,
-    "whileHover" /* AnimationType.Hover */,
-    "whileTap" /* AnimationType.Tap */,
-    "whileDrag" /* AnimationType.Drag */,
-    "exit" /* AnimationType.Exit */,
+const variantPriorityOrder = [
+    "animate",
+    "whileInView",
+    "whileFocus",
+    "whileHover",
+    "whileTap",
+    "whileDrag",
+    "exit",
 ];
-const variantProps = ["initial", ...variantPriorityOrder$1];
+const variantProps = ["initial", ...variantPriorityOrder];
 
 function isControllingVariants(props) {
     return (isAnimationControls(props.animate) ||
@@ -1405,7 +1405,7 @@ function addHoverEvent(node, isActive) {
             return;
         const props = node.getProps();
         if (node.animationState && props.whileHover) {
-            node.animationState.setActive("whileHover" /* AnimationType.Hover */, isActive);
+            node.animationState.setActive("whileHover", isActive);
         }
         if (props[callbackName]) {
             props[callbackName](event, info);
@@ -1443,13 +1443,13 @@ class FocusGesture extends Feature {
         }
         if (!isFocusVisible || !this.node.animationState)
             return;
-        this.node.animationState.setActive("whileFocus" /* AnimationType.Focus */, true);
+        this.node.animationState.setActive("whileFocus", true);
         this.isActive = true;
     }
     onBlur() {
         if (!this.isActive || !this.node.animationState)
             return;
-        this.node.animationState.setActive("whileFocus" /* AnimationType.Focus */, false);
+        this.node.animationState.setActive("whileFocus", false);
         this.isActive = false;
     }
     mount() {
@@ -1545,7 +1545,7 @@ class PressGesture extends Feature {
          * Ensure we trigger animations before firing event callback
          */
         if (whileTap && this.node.animationState) {
-            this.node.animationState.setActive("whileTap" /* AnimationType.Tap */, true);
+            this.node.animationState.setActive("whileTap", true);
         }
         onTapStart && onTapStart(event, info);
     }
@@ -1554,7 +1554,7 @@ class PressGesture extends Feature {
         this.isPressing = false;
         const props = this.node.getProps();
         if (props.whileTap && this.node.animationState) {
-            this.node.animationState.setActive("whileTap" /* AnimationType.Tap */, false);
+            this.node.animationState.setActive("whileTap", false);
         }
         return !isDragActive();
     }
@@ -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" /* AnimationType.InView */, 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,
@@ -1686,7 +1663,7 @@ class InViewFeature extends Feature {
                 this.hasEnteredView = true;
             }
             if (this.node.animationState) {
-                this.node.animationState.setActive("whileInView" /* AnimationType.InView */, isIntersecting);
+                this.node.animationState.setActive("whileInView", isIntersecting);
             }
             /**
              * Use the latest committed props rather than the ones in scope
@@ -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.6";
+        this.version = "10.0.0-alpha.0";
         /**
          * 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,7 +3624,9 @@ function createAcceleratedAnimation(value, valueName, { onUpdate, onComplete, ..
     /**
      * If this animation needs pre-generated keyframes then generate.
      */
-    if (options.type === "spring" || !isWaapiSupportedEasing(options.ease)) {
+    if (options.type === "spring" ||
+        valueName === "backgroundColor" ||
+        !isWaapiSupportedEasing(options.ease)) {
         /**
          * If we need to pre-generate keyframes and repeat is infinite then
          * early return as this will lock the thread.
@@ -4179,15 +4172,6 @@ function shouldBlockAnimation({ protectedKeys, needsAnimating }, key) {
     return shouldBlock;
 }
 
-const variantPriorityOrder = [
-    "animate" /* AnimationType.Animate */,
-    "whileInView" /* AnimationType.InView */,
-    "whileFocus" /* AnimationType.Focus */,
-    "whileHover" /* AnimationType.Hover */,
-    "whileTap" /* AnimationType.Tap */,
-    "whileDrag" /* AnimationType.Drag */,
-    "exit" /* AnimationType.Exit */,
-];
 const reversePriorityOrder = [...variantPriorityOrder].reverse();
 const numAnimationTypes = variantPriorityOrder.length;
 function animateList(visualElement) {
@@ -4488,13 +4472,13 @@ function createTypeState(isActive = false) {
 }
 function createState() {
     return {
-        ["animate" /* AnimationType.Animate */]: createTypeState(true),
-        ["whileInView" /* AnimationType.InView */]: createTypeState(),
-        ["whileHover" /* AnimationType.Hover */]: createTypeState(),
-        ["whileTap" /* AnimationType.Tap */]: createTypeState(),
-        ["whileDrag" /* AnimationType.Drag */]: createTypeState(),
-        ["whileFocus" /* AnimationType.Focus */]: createTypeState(),
-        ["exit" /* AnimationType.Exit */]: createTypeState(),
+        animate: createTypeState(true),
+        whileInView: createTypeState(),
+        whileHover: createTypeState(),
+        whileTap: createTypeState(),
+        whileDrag: createTypeState(),
+        whileFocus: createTypeState(),
+        exit: createTypeState(),
     };
 }
 
@@ -4545,7 +4529,7 @@ class ExitAnimationFeature extends Feature {
         if (!this.node.animationState || isPresent === prevIsPresent) {
             return;
         }
-        const exitAnimation = this.node.animationState.setActive("exit" /* AnimationType.Exit */, !isPresent, { custom: custom !== null && custom !== void 0 ? custom : this.node.getProps().custom });
+        const exitAnimation = this.node.animationState.setActive("exit", !isPresent, { custom: custom !== null && custom !== void 0 ? custom : this.node.getProps().custom });
         if (onExitComplete && !isPresent) {
             exitAnimation.then(() => onExitComplete(this.id));
         }
@@ -5159,7 +5143,7 @@ class VisualElementDragControls {
             // Fire onDragStart event
             onDragStart && onDragStart(event, info);
             const { animationState } = this.visualElement;
-            animationState && animationState.setActive("whileDrag" /* AnimationType.Drag */, true);
+            animationState && animationState.setActive("whileDrag", true);
         };
         const onMove = (event, info) => {
             // latestPointerEvent = event
@@ -5224,7 +5208,7 @@ class VisualElementDragControls {
             this.openGlobalLock();
             this.openGlobalLock = null;
         }
-        animationState && animationState.setActive("whileDrag" /* AnimationType.Drag */, false);
+        animationState && animationState.setActive("whileDrag", false);
     }
     updateAxis(axis, _point, offset) {
         const { drag } = this.getProps();
@@ -7828,16 +7812,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) {
@@ -7857,7 +7831,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "9.1.6", `Attempting to mix Framer Motion versions ${nextValue.version} with 9.1.6 may not work as expected.`);
+                warnOnce(nextValue.version === "10.0.0-alpha.0", `Attempting to mix Framer Motion versions ${nextValue.version} with 10.0.0-alpha.0 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {
@@ -8935,13 +8909,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();
@@ -9036,45 +9004,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.
  *
@@ -9172,6 +9101,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) {
@@ -9372,17 +9323,6 @@ const Reorder = {
     Item,
 };
 
-exports.AnimationType = void 0;
-(function (AnimationType) {
-    AnimationType["Animate"] = "animate";
-    AnimationType["Hover"] = "whileHover";
-    AnimationType["Tap"] = "whileTap";
-    AnimationType["Drag"] = "whileDrag";
-    AnimationType["Focus"] = "whileFocus";
-    AnimationType["InView"] = "whileInView";
-    AnimationType["Exit"] = "exit";
-})(exports.AnimationType || (exports.AnimationType = {}));
-
 /**
  * @public
  */
@@ -10271,15 +10211,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) => {
@@ -10726,9 +10657,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,7 +33,9 @@ function createAcceleratedAnimation(value, valueName, { onUpdate, onComplete, ..
     /**
      * If this animation needs pre-generated keyframes then generate.
      */
-    if (options.type === "spring" || !isWaapiSupportedEasing(options.ease)) {
+    if (options.type === "spring" ||
+        valueName === "backgroundColor" ||
+        !isWaapiSupportedEasing(options.ease)) {
         /**
          * If we need to pre-generate keyframes and repeat is infinite then
          * early return as this will lock the thread.

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/gestures/drag/VisualElementDragControls.mjs

@@ -96,7 +96,7 @@ class VisualElementDragControls {
             // Fire onDragStart event
             onDragStart && onDragStart(event, info);
             const { animationState } = this.visualElement;
-            animationState && animationState.setActive("whileDrag" /* AnimationType.Drag */, true);
+            animationState && animationState.setActive("whileDrag", true);
         };
         const onMove = (event, info) => {
             // latestPointerEvent = event
@@ -161,7 +161,7 @@ class VisualElementDragControls {
             this.openGlobalLock();
             this.openGlobalLock = null;
         }
-        animationState && animationState.setActive("whileDrag" /* AnimationType.Drag */, false);
+        animationState && animationState.setActive("whileDrag", false);
     }
     updateAxis(axis, _point, offset) {
         const { drag } = this.getProps();

package/dist/es/gestures/focus.mjs

@@ -23,13 +23,13 @@ class FocusGesture extends Feature {
         }
         if (!isFocusVisible || !this.node.animationState)
             return;
-        this.node.animationState.setActive("whileFocus" /* AnimationType.Focus */, true);
+        this.node.animationState.setActive("whileFocus", true);
         this.isActive = true;
     }
     onBlur() {
         if (!this.isActive || !this.node.animationState)
             return;
-        this.node.animationState.setActive("whileFocus" /* AnimationType.Focus */, false);
+        this.node.animationState.setActive("whileFocus", false);
         this.isActive = false;
     }
     mount() {

package/dist/es/gestures/hover.mjs

@@ -11,7 +11,7 @@ function addHoverEvent(node, isActive) {
             return;
         const props = node.getProps();
         if (node.animationState && props.whileHover) {
-            node.animationState.setActive("whileHover" /* AnimationType.Hover */, isActive);
+            node.animationState.setActive("whileHover", isActive);
         }
         if (props[callbackName]) {
             props[callbackName](event, info);

package/dist/es/gestures/press.mjs

@@ -73,7 +73,7 @@ class PressGesture extends Feature {
          * Ensure we trigger animations before firing event callback
          */
         if (whileTap && this.node.animationState) {
-            this.node.animationState.setActive("whileTap" /* AnimationType.Tap */, true);
+            this.node.animationState.setActive("whileTap", true);
         }
         onTapStart && onTapStart(event, info);
     }
@@ -82,7 +82,7 @@ class PressGesture extends Feature {
         this.isPressing = false;
         const props = this.node.getProps();
         if (props.whileTap && this.node.animationState) {
-            this.node.animationState.setActive("whileTap" /* AnimationType.Tap */, false);
+            this.node.animationState.setActive("whileTap", false);
         }
         return !isDragActive();
     }

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,7 +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 { AnimationType } from './render/utils/types.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/animation/exit.mjs

@@ -14,7 +14,7 @@ class ExitAnimationFeature extends Feature {
         if (!this.node.animationState || isPresent === prevIsPresent) {
             return;
         }
-        const exitAnimation = this.node.animationState.setActive("exit" /* AnimationType.Exit */, !isPresent, { custom: custom !== null && custom !== void 0 ? custom : this.node.getProps().custom });
+        const exitAnimation = this.node.animationState.setActive("exit", !isPresent, { custom: custom !== null && custom !== void 0 ? custom : this.node.getProps().custom });
         if (onExitComplete && !isPresent) {
             exitAnimation.then(() => onExitComplete(this.id));
         }

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" /* AnimationType.InView */, 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,
@@ -62,7 +39,7 @@ class InViewFeature extends Feature {
                 this.hasEnteredView = true;
             }
             if (this.node.animationState) {
-                this.node.animationState.setActive("whileInView" /* AnimationType.InView */, isIntersecting);
+                this.node.animationState.setActive("whileInView", isIntersecting);
             }
             /**
              * Use the latest committed props rather than the ones in scope

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) => {