framer-motion 12.4.13 → 12.5.0

package/dist/cjs/index.js

@@ -4,9 +4,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
-var create = require('./create-DkTZDHiS.js');
-var motionUtils = require('motion-utils');
+var create = require('./create-BErQMR-o.js');
 var motionDom = require('motion-dom');
+var motionUtils = require('motion-utils');
 
 function _interopNamespaceDefault(e) {
     var n = Object.create(null);
@@ -27,35 +27,6 @@ function _interopNamespaceDefault(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 
-function useUnmountEffect(callback) {
-    return React.useEffect(() => () => callback(), []);
-}
-
-function useIsMounted() {
-    const isMounted = React.useRef(false);
-    create.useIsomorphicLayoutEffect(() => {
-        isMounted.current = true;
-        return () => {
-            isMounted.current = false;
-        };
-    }, []);
-    return isMounted;
-}
-
-function useForceUpdate() {
-    const isMounted = useIsMounted();
-    const [forcedRenderCount, setForcedRenderCount] = React.useState(0);
-    const forceRender = React.useCallback(() => {
-        isMounted.current && setForcedRenderCount(forcedRenderCount + 1);
-    }, [forcedRenderCount]);
-    /**
-     * Defer this to the end of the next animation frame in case there are multiple
-     * synchronous calls.
-     */
-    const deferredForceRender = React.useCallback(() => create.frame.postRender(forceRender), [forceRender]);
-    return [deferredForceRender, forcedRenderCount];
-}
-
 /**
  * Measurement functionality has to be within a separate component
  * to leverage snapshot lifecycle.
@@ -379,1684 +350,1697 @@ function nodeGroup() {
     };
 }
 
-const wrap = (min, max, v) => {
-    const rangeSize = max - min;
-    return ((((v - min) % rangeSize) + rangeSize) % rangeSize) + min;
-};
-
-function getEasingForSegment(easing, i) {
-    return create.isEasingArray(easing) ? easing[wrap(0, easing.length, i)] : easing;
+function useIsMounted() {
+    const isMounted = React.useRef(false);
+    create.useIsomorphicLayoutEffect(() => {
+        isMounted.current = true;
+        return () => {
+            isMounted.current = false;
+        };
+    }, []);
+    return isMounted;
 }
 
-function isDOMKeyframes(keyframes) {
-    return typeof keyframes === "object" && !Array.isArray(keyframes);
+function useForceUpdate() {
+    const isMounted = useIsMounted();
+    const [forcedRenderCount, setForcedRenderCount] = React.useState(0);
+    const forceRender = React.useCallback(() => {
+        isMounted.current && setForcedRenderCount(forcedRenderCount + 1);
+    }, [forcedRenderCount]);
+    /**
+     * Defer this to the end of the next animation frame in case there are multiple
+     * synchronous calls.
+     */
+    const deferredForceRender = React.useCallback(() => motionDom.frame.postRender(forceRender), [forceRender]);
+    return [deferredForceRender, forcedRenderCount];
 }
 
-function resolveSubjects(subject, keyframes, scope, selectorCache) {
-    if (typeof subject === "string" && isDOMKeyframes(keyframes)) {
-        return motionDom.resolveElements(subject, scope, selectorCache);
-    }
-    else if (subject instanceof NodeList) {
-        return Array.from(subject);
-    }
-    else if (Array.isArray(subject)) {
-        return subject;
-    }
-    else {
-        return [subject];
+const shouldInheritGroup = (inherit) => inherit === true;
+const shouldInheritId = (inherit) => shouldInheritGroup(inherit === true) || inherit === "id";
+const LayoutGroup = ({ children, id, inherit = true }) => {
+    const layoutGroupContext = React.useContext(create.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(),
+        };
     }
-}
-
-function calculateRepeatDuration(duration, repeat, _repeatDelay) {
-    return duration * (repeat + 1);
-}
+    const memoizedContext = React.useMemo(() => ({ ...context.current, forceRender }), [key]);
+    return (jsxRuntime.jsx(create.LayoutGroupContext.Provider, { value: memoizedContext, children: children }));
+};
 
 /**
- * Given a absolute or relative time definition and current/prev time state of the sequence,
- * calculate an absolute time for the next keyframes.
+ * Used in conjunction with the `m` component to reduce bundle size.
+ *
+ * `m` is a version of the `motion` component that only loads functionality
+ * critical for the initial render.
+ *
+ * `LazyMotion` can then be used to either synchronously or asynchronously
+ * load animation and gesture support.
+ *
+ * ```jsx
+ * // Synchronous loading
+ * import { LazyMotion, m, domAnimation } from "framer-motion"
+ *
+ * function App() {
+ *   return (
+ *     <LazyMotion features={domAnimation}>
+ *       <m.div animate={{ scale: 2 }} />
+ *     </LazyMotion>
+ *   )
+ * }
+ *
+ * // Asynchronous loading
+ * import { LazyMotion, m } from "framer-motion"
+ *
+ * function App() {
+ *   return (
+ *     <LazyMotion features={() => import('./path/to/domAnimation')}>
+ *       <m.div animate={{ scale: 2 }} />
+ *     </LazyMotion>
+ *   )
+ * }
+ * ```
+ *
+ * @public
  */
-function calcNextTime(current, next, prev, labels) {
-    var _a;
-    if (typeof next === "number") {
-        return next;
-    }
-    else if (next.startsWith("-") || next.startsWith("+")) {
-        return Math.max(0, current + parseFloat(next));
-    }
-    else if (next === "<") {
-        return prev;
-    }
-    else {
-        return (_a = labels.get(next)) !== null && _a !== void 0 ? _a : current;
-    }
-}
-
-function eraseKeyframes(sequence, startTime, endTime) {
-    for (let i = 0; i < sequence.length; i++) {
-        const keyframe = sequence[i];
-        if (keyframe.at > startTime && keyframe.at < endTime) {
-            create.removeItem(sequence, keyframe);
-            // If we remove this item we have to push the pointer back one
-            i--;
-        }
-    }
-}
-function addKeyframes(sequence, keyframes, easing, offset, startTime, endTime) {
+function LazyMotion({ children, features, strict = false }) {
+    const [, setIsLoaded] = React.useState(!isLazyBundle(features));
+    const loadedRenderer = React.useRef(undefined);
     /**
-     * Erase every existing value between currentTime and targetTime,
-     * this will essentially splice this timeline into any currently
-     * defined ones.
+     * If this is a synchronous load, load features immediately
      */
-    eraseKeyframes(sequence, startTime, endTime);
-    for (let i = 0; i < keyframes.length; i++) {
-        sequence.push({
-            value: keyframes[i],
-            at: create.mixNumber(startTime, endTime, offset[i]),
-            easing: getEasingForSegment(easing, i),
-        });
+    if (!isLazyBundle(features)) {
+        const { renderer, ...loadedFeatures } = features;
+        loadedRenderer.current = renderer;
+        create.loadFeatures(loadedFeatures);
     }
+    React.useEffect(() => {
+        if (isLazyBundle(features)) {
+            features().then(({ renderer, ...loadedFeatures }) => {
+                create.loadFeatures(loadedFeatures);
+                loadedRenderer.current = renderer;
+                setIsLoaded(true);
+            });
+        }
+    }, []);
+    return (jsxRuntime.jsx(create.LazyContext.Provider, { value: { renderer: loadedRenderer.current, strict }, children: children }));
+}
+function isLazyBundle(features) {
+    return typeof features === "function";
 }
 
 /**
- * Take an array of times that represent repeated keyframes. For instance
- * if we have original times of [0, 0.5, 1] then our repeated times will
- * be [0, 0.5, 1, 1, 1.5, 2]. Loop over the times and scale them back
- * down to a 0-1 scale.
+ * `MotionConfig` is used to set configuration options for all children `motion` components.
+ *
+ * ```jsx
+ * import { motion, MotionConfig } from "framer-motion"
+ *
+ * export function App() {
+ *   return (
+ *     <MotionConfig transition={{ type: "spring" }}>
+ *       <motion.div animate={{ x: 100 }} />
+ *     </MotionConfig>
+ *   )
+ * }
+ * ```
+ *
+ * @public
  */
-function normalizeTimes(times, repeat) {
-    for (let i = 0; i < times.length; i++) {
-        times[i] = times[i] / (repeat + 1);
-    }
+function MotionConfig({ children, isValidProp, ...config }) {
+    isValidProp && create.loadExternalIsValidProp(isValidProp);
+    /**
+     * Inherit props from any parent MotionConfig components
+     */
+    config = { ...React.useContext(create.MotionConfigContext), ...config };
+    /**
+     * Don't allow isStatic to change between renders as it affects how many hooks
+     * motion components fire.
+     */
+    config.isStatic = create.useConstant(() => config.isStatic);
+    /**
+     * Creating a new config context object will re-render every `motion` component
+     * every time it renders. So we only want to create a new one sparingly.
+     */
+    const context = React.useMemo(() => config, [
+        JSON.stringify(config.transition),
+        config.transformPagePoint,
+        config.reducedMotion,
+    ]);
+    return (jsxRuntime.jsx(create.MotionConfigContext.Provider, { value: context, children: children }));
 }
 
-function compareByTime(a, b) {
-    if (a.at === b.at) {
-        if (a.value === null)
-            return 1;
-        if (b.value === null)
-            return -1;
-        return 0;
-    }
-    else {
-        return a.at - b.at;
-    }
-}
+const ReorderContext = React.createContext(null);
 
-const defaultSegmentEasing = "easeInOut";
-const MAX_REPEAT = 20;
-function createAnimationsFromSequence(sequence, { defaultTransition = {}, ...sequenceTransition } = {}, scope, generators) {
-    const defaultDuration = defaultTransition.duration || 0.3;
-    const animationDefinitions = new Map();
-    const sequences = new Map();
-    const elementCache = {};
-    const timeLabels = new Map();
-    let prevTime = 0;
-    let currentTime = 0;
-    let totalDuration = 0;
+function createDOMMotionComponentProxy(componentFactory) {
+    if (typeof Proxy === "undefined") {
+        return componentFactory;
+    }
     /**
-     * Build the timeline by mapping over the sequence array and converting
-     * the definitions into keyframes and offsets with absolute time values.
-     * These will later get converted into relative offsets in a second pass.
+     * A cache of generated `motion` components, e.g `motion.div`, `motion.input` etc.
+     * Rather than generating them anew every render.
      */
-    for (let i = 0; i < sequence.length; i++) {
-        const segment = sequence[i];
-        /**
-         * If this is a timeline label, mark it and skip the rest of this iteration.
-         */
-        if (typeof segment === "string") {
-            timeLabels.set(segment, currentTime);
-            continue;
-        }
-        else if (!Array.isArray(segment)) {
-            timeLabels.set(segment.name, calcNextTime(currentTime, segment.at, prevTime, timeLabels));
-            continue;
-        }
-        let [subject, keyframes, transition = {}] = segment;
-        /**
-         * If a relative or absolute time value has been specified we need to resolve
-         * it in relation to the currentTime.
-         */
-        if (transition.at !== undefined) {
-            currentTime = calcNextTime(currentTime, transition.at, prevTime, timeLabels);
+    const componentCache = new Map();
+    const deprecatedFactoryFunction = (...args) => {
+        if (process.env.NODE_ENV !== "production") {
+            motionUtils.warnOnce(false, "motion() is deprecated. Use motion.create() instead.");
         }
+        return componentFactory(...args);
+    };
+    return new Proxy(deprecatedFactoryFunction, {
         /**
-         * Keep track of the maximum duration in this definition. This will be
-         * applied to currentTime once the definition has been parsed.
+         * Called when `motion` is referenced with a prop: `motion.div`, `motion.input` etc.
+         * The prop name is passed through as `key` and we can use that to generate a `motion`
+         * DOM component with that name.
          */
-        let maxDuration = 0;
-        const resolveValueSequence = (valueKeyframes, valueTransition, valueSequence, elementIndex = 0, numSubjects = 0) => {
-            const valueKeyframesAsList = keyframesAsList(valueKeyframes);
-            const { delay = 0, times = create.defaultOffset(valueKeyframesAsList), type = "keyframes", repeat, repeatType, repeatDelay = 0, ...remainingTransition } = valueTransition;
-            let { ease = defaultTransition.ease || "easeOut", duration } = valueTransition;
-            /**
-             * Resolve stagger() if defined.
-             */
-            const calculatedDelay = typeof delay === "function"
-                ? delay(elementIndex, numSubjects)
-                : delay;
+        get: (_target, key) => {
+            if (key === "create")
+                return componentFactory;
             /**
-             * If this animation should and can use a spring, generate a spring easing function.
+             * If this element doesn't exist in the component cache, create it and cache.
              */
-            const numKeyframes = valueKeyframesAsList.length;
-            const createGenerator = motionDom.isGenerator(type)
-                ? type
-                : generators === null || generators === void 0 ? void 0 : generators[type];
-            if (numKeyframes <= 2 && createGenerator) {
-                /**
-                 * As we're creating an easing function from a spring,
-                 * ideally we want to generate it using the real distance
-                 * between the two keyframes. However this isn't always
-                 * possible - in these situations we use 0-100.
-                 */
-                let absoluteDelta = 100;
-                if (numKeyframes === 2 &&
-                    isNumberKeyframesArray(valueKeyframesAsList)) {
-                    const delta = valueKeyframesAsList[1] - valueKeyframesAsList[0];
-                    absoluteDelta = Math.abs(delta);
-                }
-                const springTransition = { ...remainingTransition };
-                if (duration !== undefined) {
-                    springTransition.duration = motionUtils.secondsToMilliseconds(duration);
-                }
-                const springEasing = motionDom.createGeneratorEasing(springTransition, absoluteDelta, createGenerator);
-                ease = springEasing.ease;
-                duration = springEasing.duration;
+            if (!componentCache.has(key)) {
+                componentCache.set(key, componentFactory(key));
             }
-            duration !== null && duration !== void 0 ? duration : (duration = defaultDuration);
-            const startTime = currentTime + calculatedDelay;
-            /**
-             * If there's only one time offset of 0, fill in a second with length 1
-             */
-            if (times.length === 1 && times[0] === 0) {
-                times[1] = 1;
+            return componentCache.get(key);
+        },
+    });
+}
+
+const motion = /*@__PURE__*/ createDOMMotionComponentProxy(create.createMotionComponent);
+
+function checkReorder(order, value, offset, velocity) {
+    if (!velocity)
+        return order;
+    const index = order.findIndex((item) => item.value === value);
+    if (index === -1)
+        return order;
+    const nextOffset = velocity > 0 ? 1 : -1;
+    const nextItem = order[index + nextOffset];
+    if (!nextItem)
+        return order;
+    const item = order[index];
+    const nextLayout = nextItem.layout;
+    const nextItemCenter = create.mixNumber(nextLayout.min, nextLayout.max, 0.5);
+    if ((nextOffset === 1 && item.layout.max + offset > nextItemCenter) ||
+        (nextOffset === -1 && item.layout.min + offset < nextItemCenter)) {
+        return motionUtils.moveItem(order, index, index + nextOffset);
+    }
+    return order;
+}
+
+function ReorderGroupComponent({ children, as = "ul", axis = "y", onReorder, values, ...props }, externalRef) {
+    const Component = create.useConstant(() => motion[as]);
+    const order = [];
+    const isReordering = React.useRef(false);
+    motionUtils.invariant(Boolean(values), "Reorder.Group must be provided a values prop");
+    const context = {
+        axis,
+        registerItem: (value, layout) => {
+            // If the entry was already added, update it rather than adding it again
+            const idx = order.findIndex((entry) => value === entry.value);
+            if (idx !== -1) {
+                order[idx].layout = layout[axis];
             }
-            /**
-             * Fill out if offset if fewer offsets than keyframes
-             */
-            const remainder = times.length - valueKeyframesAsList.length;
-            remainder > 0 && create.fillOffset(times, remainder);
-            /**
-             * If only one value has been set, ie [1], push a null to the start of
-             * the keyframe array. This will let us mark a keyframe at this point
-             * that will later be hydrated with the previous value.
-             */
-            valueKeyframesAsList.length === 1 &&
-                valueKeyframesAsList.unshift(null);
-            /**
-             * Handle repeat options
-             */
-            if (repeat) {
-                motionUtils.invariant(repeat < MAX_REPEAT, "Repeat count too high, must be less than 20");
-                duration = calculateRepeatDuration(duration, repeat);
-                const originalKeyframes = [...valueKeyframesAsList];
-                const originalTimes = [...times];
-                ease = Array.isArray(ease) ? [...ease] : [ease];
-                const originalEase = [...ease];
-                for (let repeatIndex = 0; repeatIndex < repeat; repeatIndex++) {
-                    valueKeyframesAsList.push(...originalKeyframes);
-                    for (let keyframeIndex = 0; keyframeIndex < originalKeyframes.length; keyframeIndex++) {
-                        times.push(originalTimes[keyframeIndex] + (repeatIndex + 1));
-                        ease.push(keyframeIndex === 0
-                            ? "linear"
-                            : getEasingForSegment(originalEase, keyframeIndex - 1));
-                    }
-                }
-                normalizeTimes(times, repeat);
+            else {
+                order.push({ value: value, layout: layout[axis] });
             }
-            const targetTime = startTime + duration;
-            /**
-             * Add keyframes, mapping offsets to absolute time.
-             */
-            addKeyframes(valueSequence, valueKeyframesAsList, ease, times, startTime, targetTime);
-            maxDuration = Math.max(calculatedDelay + duration, maxDuration);
-            totalDuration = Math.max(targetTime, totalDuration);
-        };
-        if (create.isMotionValue(subject)) {
-            const subjectSequence = getSubjectSequence(subject, sequences);
-            resolveValueSequence(keyframes, transition, getValueSequence("default", subjectSequence));
-        }
-        else {
-            const subjects = resolveSubjects(subject, keyframes, scope, elementCache);
-            const numSubjects = subjects.length;
-            /**
-             * For every element in this segment, process the defined values.
-             */
-            for (let subjectIndex = 0; subjectIndex < numSubjects; subjectIndex++) {
-                /**
-                 * Cast necessary, but we know these are of this type
-                 */
-                keyframes = keyframes;
-                transition = transition;
-                const thisSubject = subjects[subjectIndex];
-                const subjectSequence = getSubjectSequence(thisSubject, sequences);
-                for (const key in keyframes) {
-                    resolveValueSequence(keyframes[key], getValueTransition(transition, key), getValueSequence(key, subjectSequence), subjectIndex, numSubjects);
-                }
+            order.sort(compareMin);
+        },
+        updateOrder: (item, offset, velocity) => {
+            if (isReordering.current)
+                return;
+            const newOrder = checkReorder(order, item, offset, velocity);
+            if (order !== newOrder) {
+                isReordering.current = true;
+                onReorder(newOrder
+                    .map(getValue)
+                    .filter((value) => values.indexOf(value) !== -1));
             }
-        }
-        prevTime = currentTime;
-        currentTime += maxDuration;
-    }
+        },
+    };
+    React.useEffect(() => {
+        isReordering.current = false;
+    });
+    return (jsxRuntime.jsx(Component, { ...props, ref: externalRef, ignoreStrict: true, children: jsxRuntime.jsx(ReorderContext.Provider, { value: context, children: children }) }));
+}
+const ReorderGroup = /*@__PURE__*/ React.forwardRef(ReorderGroupComponent);
+function getValue(item) {
+    return item.value;
+}
+function compareMin(a, b) {
+    return a.layout.min - b.layout.min;
+}
+
+/**
+ * Creates a `MotionValue` to track the state and velocity of a value.
+ *
+ * Usually, these are created automatically. For advanced use-cases, like use with `useTransform`, you can create `MotionValue`s externally and pass them into the animated component via the `style` prop.
+ *
+ * ```jsx
+ * export const MyComponent = () => {
+ *   const scale = useMotionValue(1)
+ *
+ *   return <motion.div style={{ scale }} />
+ * }
+ * ```
+ *
+ * @param initial - The initial state.
+ *
+ * @public
+ */
+function useMotionValue(initial) {
+    const value = create.useConstant(() => motionDom.motionValue(initial));
     /**
-     * For every element and value combination create a new animation.
+     * If this motion value is being used in static mode, like on
+     * the Framer canvas, force components to rerender when the motion
+     * value is updated.
      */
-    sequences.forEach((valueSequences, element) => {
-        for (const key in valueSequences) {
-            const valueSequence = valueSequences[key];
-            /**
-             * Arrange all the keyframes in ascending time order.
-             */
-            valueSequence.sort(compareByTime);
-            const keyframes = [];
-            const valueOffset = [];
-            const valueEasing = [];
-            /**
-             * For each keyframe, translate absolute times into
-             * relative offsets based on the total duration of the timeline.
-             */
-            for (let i = 0; i < valueSequence.length; i++) {
-                const { at, value, easing } = valueSequence[i];
-                keyframes.push(value);
-                valueOffset.push(motionUtils.progress(0, totalDuration, at));
-                valueEasing.push(easing || "easeOut");
-            }
-            /**
-             * If the first keyframe doesn't land on offset: 0
-             * provide one by duplicating the initial keyframe. This ensures
-             * it snaps to the first keyframe when the animation starts.
-             */
-            if (valueOffset[0] !== 0) {
-                valueOffset.unshift(0);
-                keyframes.unshift(keyframes[0]);
-                valueEasing.unshift(defaultSegmentEasing);
-            }
-            /**
-             * If the last keyframe doesn't land on offset: 1
-             * provide one with a null wildcard value. This will ensure it
-             * stays static until the end of the animation.
-             */
-            if (valueOffset[valueOffset.length - 1] !== 1) {
-                valueOffset.push(1);
-                keyframes.push(null);
-            }
-            if (!animationDefinitions.has(element)) {
-                animationDefinitions.set(element, {
-                    keyframes: {},
-                    transition: {},
-                });
-            }
-            const definition = animationDefinitions.get(element);
-            definition.keyframes[key] = keyframes;
-            definition.transition[key] = {
-                ...defaultTransition,
-                duration: totalDuration,
-                ease: valueEasing,
-                times: valueOffset,
-                ...sequenceTransition,
-            };
-        }
+    const { isStatic } = React.useContext(create.MotionConfigContext);
+    if (isStatic) {
+        const [, setLatest] = React.useState(initial);
+        React.useEffect(() => value.on("change", setLatest), []);
+    }
+    return value;
+}
+
+const isCustomValueType = (v) => {
+    return v && typeof v === "object" && v.mix;
+};
+const getMixer = (v) => (isCustomValueType(v) ? v.mix : undefined);
+function transform(...args) {
+    const useImmediate = !Array.isArray(args[0]);
+    const argOffset = useImmediate ? 0 : -1;
+    const inputValue = args[0 + argOffset];
+    const inputRange = args[1 + argOffset];
+    const outputRange = args[2 + argOffset];
+    const options = args[3 + argOffset];
+    const interpolator = create.interpolate(inputRange, outputRange, {
+        mixer: getMixer(outputRange[0]),
+        ...options,
     });
-    return animationDefinitions;
+    return useImmediate ? interpolator(inputValue) : interpolator;
 }
-function getSubjectSequence(subject, sequences) {
-    !sequences.has(subject) && sequences.set(subject, {});
-    return sequences.get(subject);
+
+function useCombineMotionValues(values, combineValues) {
+    /**
+     * Initialise the returned motion value. This remains the same between renders.
+     */
+    const value = useMotionValue(combineValues());
+    /**
+     * Create a function that will update the template motion value with the latest values.
+     * This is pre-bound so whenever a motion value updates it can schedule its
+     * execution in Framesync. If it's already been scheduled it won't be fired twice
+     * in a single frame.
+     */
+    const updateValue = () => value.set(combineValues());
+    /**
+     * Synchronously update the motion value with the latest values during the render.
+     * This ensures that within a React render, the styles applied to the DOM are up-to-date.
+     */
+    updateValue();
+    /**
+     * Subscribe to all motion values found within the template. Whenever any of them change,
+     * schedule an update.
+     */
+    create.useIsomorphicLayoutEffect(() => {
+        const scheduleUpdate = () => motionDom.frame.preRender(updateValue, false, true);
+        const subscriptions = values.map((v) => v.on("change", scheduleUpdate));
+        return () => {
+            subscriptions.forEach((unsubscribe) => unsubscribe());
+            motionDom.cancelFrame(updateValue);
+        };
+    });
+    return value;
 }
-function getValueSequence(name, sequences) {
-    if (!sequences[name])
-        sequences[name] = [];
-    return sequences[name];
+
+function useComputed(compute) {
+    /**
+     * Open session of collectMotionValues. Any MotionValue that calls get()
+     * will be saved into this array.
+     */
+    motionDom.collectMotionValues.current = [];
+    compute();
+    const value = useCombineMotionValues(motionDom.collectMotionValues.current, compute);
+    /**
+     * Synchronously close session of collectMotionValues.
+     */
+    motionDom.collectMotionValues.current = undefined;
+    return value;
 }
-function keyframesAsList(keyframes) {
-    return Array.isArray(keyframes) ? keyframes : [keyframes];
+
+function useTransform(input, inputRangeOrTransformer, outputRange, options) {
+    if (typeof input === "function") {
+        return useComputed(input);
+    }
+    const transformer = typeof inputRangeOrTransformer === "function"
+        ? inputRangeOrTransformer
+        : transform(inputRangeOrTransformer, outputRange, options);
+    return Array.isArray(input)
+        ? useListTransform(input, transformer)
+        : useListTransform([input], ([latest]) => transformer(latest));
 }
-function getValueTransition(transition, key) {
-    return transition && transition[key]
-        ? {
-            ...transition,
-            ...transition[key],
+function useListTransform(values, transformer) {
+    const latest = create.useConstant(() => []);
+    return useCombineMotionValues(values, () => {
+        latest.length = 0;
+        const numValues = values.length;
+        for (let i = 0; i < numValues; i++) {
+            latest[i] = values[i].get();
         }
-        : { ...transition };
+        return transformer(latest);
+    });
 }
-const isNumber = (keyframe) => typeof keyframe === "number";
-const isNumberKeyframesArray = (keyframes) => keyframes.every(isNumber);
 
-function isObjectKey(key, object) {
-    return key in object;
+function useDefaultMotionValue(value, defaultValue = 0) {
+    return create.isMotionValue(value) ? value : useMotionValue(defaultValue);
 }
-class ObjectVisualElement extends create.VisualElement {
-    constructor() {
-        super(...arguments);
-        this.type = "object";
+function ReorderItemComponent({ children, style = {}, value, as = "li", onDrag, layout = true, ...props }, externalRef) {
+    const Component = create.useConstant(() => motion[as]);
+    const context = React.useContext(ReorderContext);
+    const point = {
+        x: useDefaultMotionValue(style.x),
+        y: useDefaultMotionValue(style.y),
+    };
+    const zIndex = useTransform([point.x, point.y], ([latestX, latestY]) => latestX || latestY ? 1 : "unset");
+    motionUtils.invariant(Boolean(context), "Reorder.Item must be a child of Reorder.Group");
+    const { axis, registerItem, updateOrder } = context;
+    return (jsxRuntime.jsx(Component, { drag: axis, ...props, dragSnapToOrigin: true, style: { ...style, x: point.x, y: point.y, zIndex }, layout: layout, onDrag: (event, gesturePoint) => {
+            const { velocity } = gesturePoint;
+            velocity[axis] &&
+                updateOrder(value, point[axis].get(), velocity[axis]);
+            onDrag && onDrag(event, gesturePoint);
+        }, onLayoutMeasure: (measured) => registerItem(value, measured), ref: externalRef, ignoreStrict: true, children: children }));
+}
+const ReorderItem = /*@__PURE__*/ React.forwardRef(ReorderItemComponent);
+
+var namespace = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    Group: ReorderGroup,
+    Item: ReorderItem
+});
+
+const wrap = (min, max, v) => {
+    const rangeSize = max - min;
+    return ((((v - min) % rangeSize) + rangeSize) % rangeSize) + min;
+};
+
+function getEasingForSegment(easing, i) {
+    return create.isEasingArray(easing) ? easing[wrap(0, easing.length, i)] : easing;
+}
+
+function isDOMKeyframes(keyframes) {
+    return typeof keyframes === "object" && !Array.isArray(keyframes);
+}
+
+function resolveSubjects(subject, keyframes, scope, selectorCache) {
+    if (typeof subject === "string" && isDOMKeyframes(keyframes)) {
+        return motionDom.resolveElements(subject, scope, selectorCache);
     }
-    readValueFromInstance(instance, key) {
-        if (isObjectKey(key, instance)) {
-            const value = instance[key];
-            if (typeof value === "string" || typeof value === "number") {
-                return value;
-            }
-        }
-        return undefined;
+    else if (subject instanceof NodeList) {
+        return Array.from(subject);
     }
-    getBaseTargetFromProps() {
-        return undefined;
+    else if (Array.isArray(subject)) {
+        return subject;
     }
-    removeValueFromRenderState(key, renderState) {
-        delete renderState.output[key];
+    else {
+        return [subject];
     }
-    measureInstanceViewportBox() {
-        return create.createBox();
+}
+
+function calculateRepeatDuration(duration, repeat, _repeatDelay) {
+    return duration * (repeat + 1);
+}
+
+/**
+ * Given a absolute or relative time definition and current/prev time state of the sequence,
+ * calculate an absolute time for the next keyframes.
+ */
+function calcNextTime(current, next, prev, labels) {
+    var _a;
+    if (typeof next === "number") {
+        return next;
     }
-    build(renderState, latestValues) {
-        Object.assign(renderState.output, latestValues);
+    else if (next.startsWith("-") || next.startsWith("+")) {
+        return Math.max(0, current + parseFloat(next));
     }
-    renderInstance(instance, { output }) {
-        Object.assign(instance, output);
+    else if (next === "<") {
+        return prev;
     }
-    sortInstanceNodePosition() {
-        return 0;
+    else {
+        return (_a = labels.get(next)) !== null && _a !== void 0 ? _a : current;
     }
 }
 
-function createDOMVisualElement(element) {
-    const options = {
-        presenceContext: null,
-        props: {},
-        visualState: {
-            renderState: {
-                transform: {},
-                transformOrigin: {},
-                style: {},
-                vars: {},
-                attrs: {},
-            },
-            latestValues: {},
-        },
-    };
-    const node = create.isSVGElement(element)
-        ? new create.SVGVisualElement(options)
-        : new create.HTMLVisualElement(options);
-    node.mount(element);
-    create.visualElementStore.set(element, node);
-}
-function createObjectVisualElement(subject) {
-    const options = {
-        presenceContext: null,
-        props: {},
-        visualState: {
-            renderState: {
-                output: {},
-            },
-            latestValues: {},
-        },
-    };
-    const node = new ObjectVisualElement(options);
-    node.mount(subject);
-    create.visualElementStore.set(subject, node);
-}
-
-function isSingleValue(subject, keyframes) {
-    return (create.isMotionValue(subject) ||
-        typeof subject === "number" ||
-        (typeof subject === "string" && !isDOMKeyframes(keyframes)));
-}
-/**
- * Implementation
- */
-function animateSubject(subject, keyframes, options, scope) {
-    const animations = [];
-    if (isSingleValue(subject, keyframes)) {
-        animations.push(create.animateSingleValue(subject, isDOMKeyframes(keyframes)
-            ? keyframes.default || keyframes
-            : keyframes, options ? options.default || options : options));
-    }
-    else {
-        const subjects = resolveSubjects(subject, keyframes, scope);
-        const numSubjects = subjects.length;
-        motionUtils.invariant(Boolean(numSubjects), "No valid elements provided.");
-        for (let i = 0; i < numSubjects; i++) {
-            const thisSubject = subjects[i];
-            const createVisualElement = thisSubject instanceof Element
-                ? createDOMVisualElement
-                : createObjectVisualElement;
-            if (!create.visualElementStore.has(thisSubject)) {
-                createVisualElement(thisSubject);
-            }
-            const visualElement = create.visualElementStore.get(thisSubject);
-            const transition = { ...options };
-            /**
-             * Resolve stagger function if provided.
-             */
-            if ("delay" in transition &&
-                typeof transition.delay === "function") {
-                transition.delay = transition.delay(i, numSubjects);
-            }
-            animations.push(...create.animateTarget(visualElement, { ...keyframes, transition }, {}));
+function eraseKeyframes(sequence, startTime, endTime) {
+    for (let i = 0; i < sequence.length; i++) {
+        const keyframe = sequence[i];
+        if (keyframe.at > startTime && keyframe.at < endTime) {
+            motionUtils.removeItem(sequence, keyframe);
+            // If we remove this item we have to push the pointer back one
+            i--;
         }
     }
-    return animations;
-}
-
-function animateSequence(sequence, options, scope) {
-    const animations = [];
-    const animationDefinitions = createAnimationsFromSequence(sequence, options, scope, { spring: create.spring });
-    animationDefinitions.forEach(({ keyframes, transition }, subject) => {
-        animations.push(...animateSubject(subject, keyframes, transition));
-    });
-    return animations;
 }
-
-function isSequence(value) {
-    return Array.isArray(value) && value.some(Array.isArray);
-}
-/**
- * Creates an animation function that is optionally scoped
- * to a specific element.
- */
-function createScopedAnimate(scope) {
+function addKeyframes(sequence, keyframes, easing, offset, startTime, endTime) {
     /**
-     * Implementation
+     * Erase every existing value between currentTime and targetTime,
+     * this will essentially splice this timeline into any currently
+     * defined ones.
      */
-    function scopedAnimate(subjectOrSequence, optionsOrKeyframes, options) {
-        let animations = [];
-        if (isSequence(subjectOrSequence)) {
-            animations = animateSequence(subjectOrSequence, optionsOrKeyframes, scope);
-        }
-        else {
-            animations = animateSubject(subjectOrSequence, optionsOrKeyframes, options, scope);
-        }
-        const animation = new motionDom.GroupPlaybackControls(animations);
-        if (scope) {
-            scope.animations.push(animation);
-        }
-        return animation;
+    eraseKeyframes(sequence, startTime, endTime);
+    for (let i = 0; i < keyframes.length; i++) {
+        sequence.push({
+            value: keyframes[i],
+            at: create.mixNumber(startTime, endTime, offset[i]),
+            easing: getEasingForSegment(easing, i),
+        });
     }
-    return scopedAnimate;
-}
-const animate = createScopedAnimate();
-
-function setCSSVar(element, name, value) {
-    element.style.setProperty(name, value);
-}
-function setStyle(element, name, value) {
-    element.style[name] = value;
 }
 
-const supportsPartialKeyframes = /*@__PURE__*/ motionUtils.memo(() => {
-    try {
-        document.createElement("div").animate({ opacity: [1] });
-    }
-    catch (e) {
-        return false;
+/**
+ * Take an array of times that represent repeated keyframes. For instance
+ * if we have original times of [0, 0.5, 1] then our repeated times will
+ * be [0, 0.5, 1, 1, 1.5, 2]. Loop over the times and scale them back
+ * down to a 0-1 scale.
+ */
+function normalizeTimes(times, repeat) {
+    for (let i = 0; i < times.length; i++) {
+        times[i] = times[i] / (repeat + 1);
     }
-    return true;
-});
+}
 
-const state = new WeakMap();
-function hydrateKeyframes(valueName, keyframes, read) {
-    for (let i = 0; i < keyframes.length; i++) {
-        if (keyframes[i] === null) {
-            keyframes[i] = i === 0 ? read() : keyframes[i - 1];
-        }
-        if (typeof keyframes[i] === "number" &&
-            create.browserNumberValueTypes[valueName]) {
-            keyframes[i] = create.browserNumberValueTypes[valueName].transform(keyframes[i]);
-        }
+function compareByTime(a, b) {
+    if (a.at === b.at) {
+        if (a.value === null)
+            return 1;
+        if (b.value === null)
+            return -1;
+        return 0;
     }
-    if (!supportsPartialKeyframes() && keyframes.length < 2) {
-        keyframes.unshift(read());
+    else {
+        return a.at - b.at;
     }
 }
-const defaultEasing = "easeOut";
-function getElementAnimationState(element) {
-    const animationState = state.get(element) || new Map();
-    state.set(element, animationState);
-    return state.get(element);
-}
-class NativeAnimation extends motionDom.NativeAnimationControls {
-    constructor(element, valueName, valueKeyframes, options) {
-        const isCSSVar = valueName.startsWith("--");
-        motionUtils.invariant(typeof options.type !== "string", `animateMini doesn't support "type" as a string. Did you mean to import { spring } from "framer-motion"?`);
-        const existingAnimation = getElementAnimationState(element).get(valueName);
-        existingAnimation && existingAnimation.stop();
-        const readInitialKeyframe = () => {
-            return valueName.startsWith("--")
-                ? element.style.getPropertyValue(valueName)
-                : window.getComputedStyle(element)[valueName];
-        };
-        if (!Array.isArray(valueKeyframes)) {
-            valueKeyframes = [valueKeyframes];
-        }
-        hydrateKeyframes(valueName, valueKeyframes, readInitialKeyframe);
-        // TODO: Replace this with toString()?
-        if (motionDom.isGenerator(options.type)) {
-            const generatorOptions = motionDom.createGeneratorEasing(options, 100, options.type);
-            options.ease = motionDom.supportsLinearEasing()
-                ? generatorOptions.ease
-                : defaultEasing;
-            options.duration = motionUtils.secondsToMilliseconds(generatorOptions.duration);
-            options.type = "keyframes";
-        }
-        else {
-            options.ease = options.ease || defaultEasing;
-        }
-        const onFinish = () => {
-            this.setValue(element, valueName, create.getFinalKeyframe(valueKeyframes, options));
-            this.cancel();
-            this.resolveFinishedPromise();
-        };
-        const init = () => {
-            this.setValue = isCSSVar ? setCSSVar : setStyle;
-            this.options = options;
-            this.updateFinishedPromise();
-            this.removeAnimation = () => {
-                const elementState = state.get(element);
-                elementState && elementState.delete(valueName);
-            };
-        };
-        if (!create.supportsWaapi()) {
-            super();
-            init();
-            onFinish();
-        }
-        else {
-            super(create.startWaapiAnimation(element, valueName, valueKeyframes, options));
-            init();
-            if (options.autoplay === false) {
-                this.animation.pause();
-            }
-            this.animation.onfinish = onFinish;
-            getElementAnimationState(element).set(valueName, this);
-        }
-    }
+
+const defaultSegmentEasing = "easeInOut";
+const MAX_REPEAT = 20;
+function createAnimationsFromSequence(sequence, { defaultTransition = {}, ...sequenceTransition } = {}, scope, generators) {
+    const defaultDuration = defaultTransition.duration || 0.3;
+    const animationDefinitions = new Map();
+    const sequences = new Map();
+    const elementCache = {};
+    const timeLabels = new Map();
+    let prevTime = 0;
+    let currentTime = 0;
+    let totalDuration = 0;
     /**
-     * Allows the returned animation to be awaited or promise-chained. Currently
-     * resolves when the animation finishes at all but in a future update could/should
-     * reject if its cancels.
+     * Build the timeline by mapping over the sequence array and converting
+     * the definitions into keyframes and offsets with absolute time values.
+     * These will later get converted into relative offsets in a second pass.
      */
-    then(resolve, reject) {
-        return this.currentFinishedPromise.then(resolve, reject);
-    }
-    updateFinishedPromise() {
-        this.currentFinishedPromise = new Promise((resolve) => {
-            this.resolveFinishedPromise = resolve;
-        });
-    }
-    play() {
-        if (this.state === "finished") {
-            this.updateFinishedPromise();
+    for (let i = 0; i < sequence.length; i++) {
+        const segment = sequence[i];
+        /**
+         * If this is a timeline label, mark it and skip the rest of this iteration.
+         */
+        if (typeof segment === "string") {
+            timeLabels.set(segment, currentTime);
+            continue;
         }
-        super.play();
-    }
-    cancel() {
-        this.removeAnimation();
-        super.cancel();
-    }
-}
-
-function animateElements(elementOrSelector, keyframes, options, scope) {
-    const elements = motionDom.resolveElements(elementOrSelector, scope);
-    const numElements = elements.length;
-    motionUtils.invariant(Boolean(numElements), "No valid element provided.");
-    const animations = [];
-    for (let i = 0; i < numElements; i++) {
-        const element = elements[i];
-        const elementTransition = { ...options };
+        else if (!Array.isArray(segment)) {
+            timeLabels.set(segment.name, calcNextTime(currentTime, segment.at, prevTime, timeLabels));
+            continue;
+        }
+        let [subject, keyframes, transition = {}] = segment;
         /**
-         * Resolve stagger function if provided.
+         * If a relative or absolute time value has been specified we need to resolve
+         * it in relation to the currentTime.
          */
-        if (typeof elementTransition.delay === "function") {
-            elementTransition.delay = elementTransition.delay(i, numElements);
-        }
-        for (const valueName in keyframes) {
-            const valueKeyframes = keyframes[valueName];
-            const valueOptions = {
-                ...motionDom.getValueTransition(elementTransition, valueName),
-            };
-            valueOptions.duration = valueOptions.duration
-                ? motionUtils.secondsToMilliseconds(valueOptions.duration)
-                : valueOptions.duration;
-            valueOptions.delay = motionUtils.secondsToMilliseconds(valueOptions.delay || 0);
-            valueOptions.allowFlatten =
-                !elementTransition.type && !elementTransition.ease;
-            animations.push(new NativeAnimation(element, valueName, valueKeyframes, valueOptions));
-        }
-    }
-    return animations;
-}
-
-const createScopedWaapiAnimate = (scope) => {
-    function scopedAnimate(elementOrSelector, keyframes, options) {
-        return new motionDom.GroupPlaybackControls(animateElements(elementOrSelector, keyframes, options, scope));
-    }
-    return scopedAnimate;
-};
-const animateMini = /*@__PURE__*/ createScopedWaapiAnimate();
-
-function observeTimeline(update, timeline) {
-    let prevProgress;
-    const onFrame = () => {
-        const { currentTime } = timeline;
-        const percentage = currentTime === null ? 0 : currentTime.value;
-        const progress = percentage / 100;
-        if (prevProgress !== progress) {
-            update(progress);
-        }
-        prevProgress = progress;
-    };
-    create.frame.update(onFrame, true);
-    return () => create.cancelFrame(onFrame);
-}
-
-const resizeHandlers = new WeakMap();
-let observer;
-function getElementSize(target, borderBoxSize) {
-    if (borderBoxSize) {
-        const { inlineSize, blockSize } = borderBoxSize[0];
-        return { width: inlineSize, height: blockSize };
-    }
-    else if (target instanceof SVGElement && "getBBox" in target) {
-        return target.getBBox();
-    }
-    else {
-        return {
-            width: target.offsetWidth,
-            height: target.offsetHeight,
-        };
-    }
-}
-function notifyTarget({ target, contentRect, borderBoxSize, }) {
-    var _a;
-    (_a = resizeHandlers.get(target)) === null || _a === void 0 ? void 0 : _a.forEach((handler) => {
-        handler({
-            target,
-            contentSize: contentRect,
-            get size() {
-                return getElementSize(target, borderBoxSize);
-            },
-        });
-    });
-}
-function notifyAll(entries) {
-    entries.forEach(notifyTarget);
-}
-function createResizeObserver() {
-    if (typeof ResizeObserver === "undefined")
-        return;
-    observer = new ResizeObserver(notifyAll);
-}
-function resizeElement(target, handler) {
-    if (!observer)
-        createResizeObserver();
-    const elements = motionDom.resolveElements(target);
-    elements.forEach((element) => {
-        let elementHandlers = resizeHandlers.get(element);
-        if (!elementHandlers) {
-            elementHandlers = new Set();
-            resizeHandlers.set(element, elementHandlers);
+        if (transition.at !== undefined) {
+            currentTime = calcNextTime(currentTime, transition.at, prevTime, timeLabels);
         }
-        elementHandlers.add(handler);
-        observer === null || observer === void 0 ? void 0 : observer.observe(element);
-    });
-    return () => {
-        elements.forEach((element) => {
-            const elementHandlers = resizeHandlers.get(element);
-            elementHandlers === null || elementHandlers === void 0 ? void 0 : elementHandlers.delete(handler);
-            if (!(elementHandlers === null || elementHandlers === void 0 ? void 0 : elementHandlers.size)) {
-                observer === null || observer === void 0 ? void 0 : observer.unobserve(element);
+        /**
+         * Keep track of the maximum duration in this definition. This will be
+         * applied to currentTime once the definition has been parsed.
+         */
+        let maxDuration = 0;
+        const resolveValueSequence = (valueKeyframes, valueTransition, valueSequence, elementIndex = 0, numSubjects = 0) => {
+            const valueKeyframesAsList = keyframesAsList(valueKeyframes);
+            const { delay = 0, times = create.defaultOffset(valueKeyframesAsList), type = "keyframes", repeat, repeatType, repeatDelay = 0, ...remainingTransition } = valueTransition;
+            let { ease = defaultTransition.ease || "easeOut", duration } = valueTransition;
+            /**
+             * Resolve stagger() if defined.
+             */
+            const calculatedDelay = typeof delay === "function"
+                ? delay(elementIndex, numSubjects)
+                : delay;
+            /**
+             * If this animation should and can use a spring, generate a spring easing function.
+             */
+            const numKeyframes = valueKeyframesAsList.length;
+            const createGenerator = motionDom.isGenerator(type)
+                ? type
+                : generators === null || generators === void 0 ? void 0 : generators[type];
+            if (numKeyframes <= 2 && createGenerator) {
+                /**
+                 * As we're creating an easing function from a spring,
+                 * ideally we want to generate it using the real distance
+                 * between the two keyframes. However this isn't always
+                 * possible - in these situations we use 0-100.
+                 */
+                let absoluteDelta = 100;
+                if (numKeyframes === 2 &&
+                    isNumberKeyframesArray(valueKeyframesAsList)) {
+                    const delta = valueKeyframesAsList[1] - valueKeyframesAsList[0];
+                    absoluteDelta = Math.abs(delta);
+                }
+                const springTransition = { ...remainingTransition };
+                if (duration !== undefined) {
+                    springTransition.duration = motionUtils.secondsToMilliseconds(duration);
+                }
+                const springEasing = motionDom.createGeneratorEasing(springTransition, absoluteDelta, createGenerator);
+                ease = springEasing.ease;
+                duration = springEasing.duration;
             }
-        });
-    };
-}
-
-const windowCallbacks = new Set();
-let windowResizeHandler;
-function createWindowResizeHandler() {
-    windowResizeHandler = () => {
-        const size = {
-            width: window.innerWidth,
-            height: window.innerHeight,
-        };
-        const info = {
-            target: window,
-            size,
-            contentSize: size,
-        };
-        windowCallbacks.forEach((callback) => callback(info));
-    };
-    window.addEventListener("resize", windowResizeHandler);
-}
-function resizeWindow(callback) {
-    windowCallbacks.add(callback);
-    if (!windowResizeHandler)
-        createWindowResizeHandler();
-    return () => {
-        windowCallbacks.delete(callback);
-        if (!windowCallbacks.size && windowResizeHandler) {
-            windowResizeHandler = undefined;
-        }
-    };
-}
-
-function resize(a, b) {
-    return typeof a === "function" ? resizeWindow(a) : resizeElement(a, b);
-}
-
-/**
- * A time in milliseconds, beyond which we consider the scroll velocity to be 0.
- */
-const maxElapsed = 50;
-const createAxisInfo = () => ({
-    current: 0,
-    offset: [],
-    progress: 0,
-    scrollLength: 0,
-    targetOffset: 0,
-    targetLength: 0,
-    containerLength: 0,
-    velocity: 0,
-});
-const createScrollInfo = () => ({
-    time: 0,
-    x: createAxisInfo(),
-    y: createAxisInfo(),
-});
-const keys = {
-    x: {
-        length: "Width",
-        position: "Left",
-    },
-    y: {
-        length: "Height",
-        position: "Top",
-    },
-};
-function updateAxisInfo(element, axisName, info, time) {
-    const axis = info[axisName];
-    const { length, position } = keys[axisName];
-    const prev = axis.current;
-    const prevTime = info.time;
-    axis.current = element[`scroll${position}`];
-    axis.scrollLength = element[`scroll${length}`] - element[`client${length}`];
-    axis.offset.length = 0;
-    axis.offset[0] = 0;
-    axis.offset[1] = axis.scrollLength;
-    axis.progress = motionUtils.progress(0, axis.scrollLength, axis.current);
-    const elapsed = time - prevTime;
-    axis.velocity =
-        elapsed > maxElapsed
-            ? 0
-            : create.velocityPerSecond(axis.current - prev, elapsed);
-}
-function updateScrollInfo(element, info, time) {
-    updateAxisInfo(element, "x", info, time);
-    updateAxisInfo(element, "y", info, time);
-    info.time = time;
-}
-
-function calcInset(element, container) {
-    const inset = { x: 0, y: 0 };
-    let current = element;
-    while (current && current !== container) {
-        if (current instanceof HTMLElement) {
-            inset.x += current.offsetLeft;
-            inset.y += current.offsetTop;
-            current = current.offsetParent;
-        }
-        else if (current.tagName === "svg") {
+            duration !== null && duration !== void 0 ? duration : (duration = defaultDuration);
+            const startTime = currentTime + calculatedDelay;
             /**
-             * This isn't an ideal approach to measuring the offset of <svg /> tags.
-             * It would be preferable, given they behave like HTMLElements in most ways
-             * to use offsetLeft/Top. But these don't exist on <svg />. Likewise we
-             * can't use .getBBox() like most SVG elements as these provide the offset
-             * relative to the SVG itself, which for <svg /> is usually 0x0.
+             * If there's only one time offset of 0, fill in a second with length 1
              */
-            const svgBoundingBox = current.getBoundingClientRect();
-            current = current.parentElement;
-            const parentBoundingBox = current.getBoundingClientRect();
-            inset.x += svgBoundingBox.left - parentBoundingBox.left;
-            inset.y += svgBoundingBox.top - parentBoundingBox.top;
-        }
-        else if (current instanceof SVGGraphicsElement) {
-            const { x, y } = current.getBBox();
-            inset.x += x;
-            inset.y += y;
-            let svg = null;
-            let parent = current.parentNode;
-            while (!svg) {
-                if (parent.tagName === "svg") {
-                    svg = parent;
+            if (times.length === 1 && times[0] === 0) {
+                times[1] = 1;
+            }
+            /**
+             * Fill out if offset if fewer offsets than keyframes
+             */
+            const remainder = times.length - valueKeyframesAsList.length;
+            remainder > 0 && create.fillOffset(times, remainder);
+            /**
+             * If only one value has been set, ie [1], push a null to the start of
+             * the keyframe array. This will let us mark a keyframe at this point
+             * that will later be hydrated with the previous value.
+             */
+            valueKeyframesAsList.length === 1 &&
+                valueKeyframesAsList.unshift(null);
+            /**
+             * Handle repeat options
+             */
+            if (repeat) {
+                motionUtils.invariant(repeat < MAX_REPEAT, "Repeat count too high, must be less than 20");
+                duration = calculateRepeatDuration(duration, repeat);
+                const originalKeyframes = [...valueKeyframesAsList];
+                const originalTimes = [...times];
+                ease = Array.isArray(ease) ? [...ease] : [ease];
+                const originalEase = [...ease];
+                for (let repeatIndex = 0; repeatIndex < repeat; repeatIndex++) {
+                    valueKeyframesAsList.push(...originalKeyframes);
+                    for (let keyframeIndex = 0; keyframeIndex < originalKeyframes.length; keyframeIndex++) {
+                        times.push(originalTimes[keyframeIndex] + (repeatIndex + 1));
+                        ease.push(keyframeIndex === 0
+                            ? "linear"
+                            : getEasingForSegment(originalEase, keyframeIndex - 1));
+                    }
                 }
-                parent = current.parentNode;
+                normalizeTimes(times, repeat);
             }
-            current = svg;
+            const targetTime = startTime + duration;
+            /**
+             * Add keyframes, mapping offsets to absolute time.
+             */
+            addKeyframes(valueSequence, valueKeyframesAsList, ease, times, startTime, targetTime);
+            maxDuration = Math.max(calculatedDelay + duration, maxDuration);
+            totalDuration = Math.max(targetTime, totalDuration);
+        };
+        if (create.isMotionValue(subject)) {
+            const subjectSequence = getSubjectSequence(subject, sequences);
+            resolveValueSequence(keyframes, transition, getValueSequence("default", subjectSequence));
         }
         else {
-            break;
+            const subjects = resolveSubjects(subject, keyframes, scope, elementCache);
+            const numSubjects = subjects.length;
+            /**
+             * For every element in this segment, process the defined values.
+             */
+            for (let subjectIndex = 0; subjectIndex < numSubjects; subjectIndex++) {
+                /**
+                 * Cast necessary, but we know these are of this type
+                 */
+                keyframes = keyframes;
+                transition = transition;
+                const thisSubject = subjects[subjectIndex];
+                const subjectSequence = getSubjectSequence(thisSubject, sequences);
+                for (const key in keyframes) {
+                    resolveValueSequence(keyframes[key], getValueTransition(transition, key), getValueSequence(key, subjectSequence), subjectIndex, numSubjects);
+                }
+            }
         }
-    }
-    return inset;
-}
-
-const namedEdges = {
-    start: 0,
-    center: 0.5,
-    end: 1,
-};
-function resolveEdge(edge, length, inset = 0) {
-    let delta = 0;
-    /**
-     * If we have this edge defined as a preset, replace the definition
-     * with the numerical value.
-     */
-    if (edge in namedEdges) {
-        edge = namedEdges[edge];
+        prevTime = currentTime;
+        currentTime += maxDuration;
     }
     /**
-     * Handle unit values
+     * For every element and value combination create a new animation.
      */
-    if (typeof edge === "string") {
-        const asNumber = parseFloat(edge);
-        if (edge.endsWith("px")) {
-            delta = asNumber;
-        }
-        else if (edge.endsWith("%")) {
-            edge = asNumber / 100;
-        }
-        else if (edge.endsWith("vw")) {
-            delta = (asNumber / 100) * document.documentElement.clientWidth;
+    sequences.forEach((valueSequences, element) => {
+        for (const key in valueSequences) {
+            const valueSequence = valueSequences[key];
+            /**
+             * Arrange all the keyframes in ascending time order.
+             */
+            valueSequence.sort(compareByTime);
+            const keyframes = [];
+            const valueOffset = [];
+            const valueEasing = [];
+            /**
+             * For each keyframe, translate absolute times into
+             * relative offsets based on the total duration of the timeline.
+             */
+            for (let i = 0; i < valueSequence.length; i++) {
+                const { at, value, easing } = valueSequence[i];
+                keyframes.push(value);
+                valueOffset.push(motionUtils.progress(0, totalDuration, at));
+                valueEasing.push(easing || "easeOut");
+            }
+            /**
+             * If the first keyframe doesn't land on offset: 0
+             * provide one by duplicating the initial keyframe. This ensures
+             * it snaps to the first keyframe when the animation starts.
+             */
+            if (valueOffset[0] !== 0) {
+                valueOffset.unshift(0);
+                keyframes.unshift(keyframes[0]);
+                valueEasing.unshift(defaultSegmentEasing);
+            }
+            /**
+             * If the last keyframe doesn't land on offset: 1
+             * provide one with a null wildcard value. This will ensure it
+             * stays static until the end of the animation.
+             */
+            if (valueOffset[valueOffset.length - 1] !== 1) {
+                valueOffset.push(1);
+                keyframes.push(null);
+            }
+            if (!animationDefinitions.has(element)) {
+                animationDefinitions.set(element, {
+                    keyframes: {},
+                    transition: {},
+                });
+            }
+            const definition = animationDefinitions.get(element);
+            definition.keyframes[key] = keyframes;
+            definition.transition[key] = {
+                ...defaultTransition,
+                duration: totalDuration,
+                ease: valueEasing,
+                times: valueOffset,
+                ...sequenceTransition,
+            };
         }
-        else if (edge.endsWith("vh")) {
-            delta = (asNumber / 100) * document.documentElement.clientHeight;
+    });
+    return animationDefinitions;
+}
+function getSubjectSequence(subject, sequences) {
+    !sequences.has(subject) && sequences.set(subject, {});
+    return sequences.get(subject);
+}
+function getValueSequence(name, sequences) {
+    if (!sequences[name])
+        sequences[name] = [];
+    return sequences[name];
+}
+function keyframesAsList(keyframes) {
+    return Array.isArray(keyframes) ? keyframes : [keyframes];
+}
+function getValueTransition(transition, key) {
+    return transition && transition[key]
+        ? {
+            ...transition,
+            ...transition[key],
         }
-        else {
-            edge = asNumber;
+        : { ...transition };
+}
+const isNumber = (keyframe) => typeof keyframe === "number";
+const isNumberKeyframesArray = (keyframes) => keyframes.every(isNumber);
+
+function isObjectKey(key, object) {
+    return key in object;
+}
+class ObjectVisualElement extends create.VisualElement {
+    constructor() {
+        super(...arguments);
+        this.type = "object";
+    }
+    readValueFromInstance(instance, key) {
+        if (isObjectKey(key, instance)) {
+            const value = instance[key];
+            if (typeof value === "string" || typeof value === "number") {
+                return value;
+            }
         }
+        return undefined;
     }
-    /**
-     * If the edge is defined as a number, handle as a progress value.
-     */
-    if (typeof edge === "number") {
-        delta = length * edge;
+    getBaseTargetFromProps() {
+        return undefined;
+    }
+    removeValueFromRenderState(key, renderState) {
+        delete renderState.output[key];
+    }
+    measureInstanceViewportBox() {
+        return create.createBox();
+    }
+    build(renderState, latestValues) {
+        Object.assign(renderState.output, latestValues);
+    }
+    renderInstance(instance, { output }) {
+        Object.assign(instance, output);
+    }
+    sortInstanceNodePosition() {
+        return 0;
     }
-    return inset + delta;
 }
 
-const defaultOffset = [0, 0];
-function resolveOffset(offset, containerLength, targetLength, targetInset) {
-    let offsetDefinition = Array.isArray(offset) ? offset : defaultOffset;
-    let targetPoint = 0;
-    let containerPoint = 0;
-    if (typeof offset === "number") {
-        /**
-         * If we're provided offset: [0, 0.5, 1] then each number x should become
-         * [x, x], so we default to the behaviour of mapping 0 => 0 of both target
-         * and container etc.
-         */
-        offsetDefinition = [offset, offset];
+function createDOMVisualElement(element) {
+    const options = {
+        presenceContext: null,
+        props: {},
+        visualState: {
+            renderState: {
+                transform: {},
+                transformOrigin: {},
+                style: {},
+                vars: {},
+                attrs: {},
+            },
+            latestValues: {},
+        },
+    };
+    const node = create.isSVGElement(element)
+        ? new create.SVGVisualElement(options)
+        : new create.HTMLVisualElement(options);
+    node.mount(element);
+    create.visualElementStore.set(element, node);
+}
+function createObjectVisualElement(subject) {
+    const options = {
+        presenceContext: null,
+        props: {},
+        visualState: {
+            renderState: {
+                output: {},
+            },
+            latestValues: {},
+        },
+    };
+    const node = new ObjectVisualElement(options);
+    node.mount(subject);
+    create.visualElementStore.set(subject, node);
+}
+
+function isSingleValue(subject, keyframes) {
+    return (create.isMotionValue(subject) ||
+        typeof subject === "number" ||
+        (typeof subject === "string" && !isDOMKeyframes(keyframes)));
+}
+/**
+ * Implementation
+ */
+function animateSubject(subject, keyframes, options, scope) {
+    const animations = [];
+    if (isSingleValue(subject, keyframes)) {
+        animations.push(create.animateSingleValue(subject, isDOMKeyframes(keyframes)
+            ? keyframes.default || keyframes
+            : keyframes, options ? options.default || options : options));
     }
-    else if (typeof offset === "string") {
-        offset = offset.trim();
-        if (offset.includes(" ")) {
-            offsetDefinition = offset.split(" ");
-        }
-        else {
+    else {
+        const subjects = resolveSubjects(subject, keyframes, scope);
+        const numSubjects = subjects.length;
+        motionUtils.invariant(Boolean(numSubjects), "No valid elements provided.");
+        for (let i = 0; i < numSubjects; i++) {
+            const thisSubject = subjects[i];
+            const createVisualElement = thisSubject instanceof Element
+                ? createDOMVisualElement
+                : createObjectVisualElement;
+            if (!create.visualElementStore.has(thisSubject)) {
+                createVisualElement(thisSubject);
+            }
+            const visualElement = create.visualElementStore.get(thisSubject);
+            const transition = { ...options };
             /**
-             * If we're provided a definition like "100px" then we want to apply
-             * that only to the top of the target point, leaving the container at 0.
-             * Whereas a named offset like "end" should be applied to both.
+             * Resolve stagger function if provided.
              */
-            offsetDefinition = [offset, namedEdges[offset] ? offset : `0`];
+            if ("delay" in transition &&
+                typeof transition.delay === "function") {
+                transition.delay = transition.delay(i, numSubjects);
+            }
+            animations.push(...create.animateTarget(visualElement, { ...keyframes, transition }, {}));
         }
     }
-    targetPoint = resolveEdge(offsetDefinition[0], targetLength, targetInset);
-    containerPoint = resolveEdge(offsetDefinition[1], containerLength);
-    return targetPoint - containerPoint;
+    return animations;
 }
 
-const ScrollOffset = {
-    Enter: [
-        [0, 1],
-        [1, 1],
-    ],
-    Exit: [
-        [0, 0],
-        [1, 0],
-    ],
-    Any: [
-        [1, 0],
-        [0, 1],
-    ],
-    All: [
-        [0, 0],
-        [1, 1],
-    ],
-};
+function animateSequence(sequence, options, scope) {
+    const animations = [];
+    const animationDefinitions = createAnimationsFromSequence(sequence, options, scope, { spring: create.spring });
+    animationDefinitions.forEach(({ keyframes, transition }, subject) => {
+        animations.push(...animateSubject(subject, keyframes, transition));
+    });
+    return animations;
+}
 
-const point = { x: 0, y: 0 };
-function getTargetSize(target) {
-    return "getBBox" in target && target.tagName !== "svg"
-        ? target.getBBox()
-        : { width: target.clientWidth, height: target.clientHeight };
+function isSequence(value) {
+    return Array.isArray(value) && value.some(Array.isArray);
 }
-function resolveOffsets(container, info, options) {
-    const { offset: offsetDefinition = ScrollOffset.All } = options;
-    const { target = container, axis = "y" } = options;
-    const lengthLabel = axis === "y" ? "height" : "width";
-    const inset = target !== container ? calcInset(target, container) : point;
-    /**
-     * Measure the target and container. If they're the same thing then we
-     * use the container's scrollWidth/Height as the target, from there
-     * all other calculations can remain the same.
-     */
-    const targetSize = target === container
-        ? { width: container.scrollWidth, height: container.scrollHeight }
-        : getTargetSize(target);
-    const containerSize = {
-        width: container.clientWidth,
-        height: container.clientHeight,
-    };
-    /**
-     * Reset the length of the resolved offset array rather than creating a new one.
-     * TODO: More reusable data structures for targetSize/containerSize would also be good.
-     */
-    info[axis].offset.length = 0;
+/**
+ * Creates an animation function that is optionally scoped
+ * to a specific element.
+ */
+function createScopedAnimate(scope) {
     /**
-     * Populate the offset array by resolving the user's offset definition into
-     * a list of pixel scroll offets.
+     * Implementation
      */
-    let hasChanged = !info[axis].interpolate;
-    const numOffsets = offsetDefinition.length;
-    for (let i = 0; i < numOffsets; i++) {
-        const offset = resolveOffset(offsetDefinition[i], containerSize[lengthLabel], targetSize[lengthLabel], inset[axis]);
-        if (!hasChanged && offset !== info[axis].interpolatorOffsets[i]) {
-            hasChanged = true;
+    function scopedAnimate(subjectOrSequence, optionsOrKeyframes, options) {
+        let animations = [];
+        if (isSequence(subjectOrSequence)) {
+            animations = animateSequence(subjectOrSequence, optionsOrKeyframes, scope);
         }
-        info[axis].offset[i] = offset;
+        else {
+            animations = animateSubject(subjectOrSequence, optionsOrKeyframes, options, scope);
+        }
+        const animation = new motionDom.GroupPlaybackControls(animations);
+        if (scope) {
+            scope.animations.push(animation);
+        }
+        return animation;
     }
-    /**
-     * If the pixel scroll offsets have changed, create a new interpolator function
-     * to map scroll value into a progress.
-     */
-    if (hasChanged) {
-        info[axis].interpolate = create.interpolate(info[axis].offset, create.defaultOffset(offsetDefinition), { clamp: false });
-        info[axis].interpolatorOffsets = [...info[axis].offset];
+    return scopedAnimate;
+}
+const animate = createScopedAnimate();
+
+function setCSSVar(element, name, value) {
+    element.style.setProperty(name, value);
+}
+function setStyle(element, name, value) {
+    element.style[name] = value;
+}
+
+const supportsPartialKeyframes = /*@__PURE__*/ motionUtils.memo(() => {
+    try {
+        document.createElement("div").animate({ opacity: [1] });
     }
-    info[axis].progress = create.clamp(0, 1, info[axis].interpolate(info[axis].current));
-}
+    catch (e) {
+        return false;
+    }
+    return true;
+});
 
-function measure(container, target = container, info) {
-    /**
-     * Find inset of target within scrollable container
-     */
-    info.x.targetOffset = 0;
-    info.y.targetOffset = 0;
-    if (target !== container) {
-        let node = target;
-        while (node && node !== container) {
-            info.x.targetOffset += node.offsetLeft;
-            info.y.targetOffset += node.offsetTop;
-            node = node.offsetParent;
+const state = new WeakMap();
+function hydrateKeyframes(valueName, keyframes, read) {
+    for (let i = 0; i < keyframes.length; i++) {
+        if (keyframes[i] === null) {
+            keyframes[i] = i === 0 ? read() : keyframes[i - 1];
         }
-    }
-    info.x.targetLength =
-        target === container ? target.scrollWidth : target.clientWidth;
-    info.y.targetLength =
-        target === container ? target.scrollHeight : target.clientHeight;
-    info.x.containerLength = container.clientWidth;
-    info.y.containerLength = container.clientHeight;
-    /**
-     * In development mode ensure scroll containers aren't position: static as this makes
-     * it difficult to measure their relative positions.
-     */
-    if (process.env.NODE_ENV !== "production") {
-        if (container && target && target !== container) {
-            create.warnOnce(getComputedStyle(container).position !== "static", "Please ensure that the container has a non-static position, like 'relative', 'fixed', or 'absolute' to ensure scroll offset is calculated correctly.");
+        if (typeof keyframes[i] === "number" &&
+            create.browserNumberValueTypes[valueName]) {
+            keyframes[i] = create.browserNumberValueTypes[valueName].transform(keyframes[i]);
         }
     }
+    if (!supportsPartialKeyframes() && keyframes.length < 2) {
+        keyframes.unshift(read());
+    }
 }
-function createOnScrollHandler(element, onScroll, info, options = {}) {
-    return {
-        measure: () => measure(element, options.target, info),
-        update: (time) => {
-            updateScrollInfo(element, info, time);
-            if (options.offset || options.target) {
-                resolveOffsets(element, info, options);
-            }
-        },
-        notify: () => onScroll(info),
-    };
+const defaultEasing = "easeOut";
+function getElementAnimationState(element) {
+    const animationState = state.get(element) || new Map();
+    state.set(element, animationState);
+    return state.get(element);
 }
-
-const scrollListeners = new WeakMap();
-const resizeListeners = new WeakMap();
-const onScrollHandlers = new WeakMap();
-const getEventTarget = (element) => element === document.documentElement ? window : element;
-function scrollInfo(onScroll, { container = document.documentElement, ...options } = {}) {
-    let containerHandlers = onScrollHandlers.get(container);
-    /**
-     * Get the onScroll handlers for this container.
-     * If one isn't found, create a new one.
-     */
-    if (!containerHandlers) {
-        containerHandlers = new Set();
-        onScrollHandlers.set(container, containerHandlers);
-    }
-    /**
-     * Create a new onScroll handler for the provided callback.
-     */
-    const info = createScrollInfo();
-    const containerHandler = createOnScrollHandler(container, onScroll, info, options);
-    containerHandlers.add(containerHandler);
-    /**
-     * Check if there's a scroll event listener for this container.
-     * If not, create one.
-     */
-    if (!scrollListeners.has(container)) {
-        const measureAll = () => {
-            for (const handler of containerHandlers)
-                handler.measure();
-        };
-        const updateAll = () => {
-            for (const handler of containerHandlers) {
-                handler.update(create.frameData.timestamp);
-            }
+class NativeAnimation extends motionDom.NativeAnimationControls {
+    constructor(element, valueName, valueKeyframes, options) {
+        const isCSSVar = valueName.startsWith("--");
+        motionUtils.invariant(typeof options.type !== "string", `animateMini doesn't support "type" as a string. Did you mean to import { spring } from "framer-motion"?`);
+        const existingAnimation = getElementAnimationState(element).get(valueName);
+        existingAnimation && existingAnimation.stop();
+        const readInitialKeyframe = () => {
+            return valueName.startsWith("--")
+                ? element.style.getPropertyValue(valueName)
+                : window.getComputedStyle(element)[valueName];
         };
-        const notifyAll = () => {
-            for (const handler of containerHandlers)
-                handler.notify();
+        if (!Array.isArray(valueKeyframes)) {
+            valueKeyframes = [valueKeyframes];
+        }
+        hydrateKeyframes(valueName, valueKeyframes, readInitialKeyframe);
+        // TODO: Replace this with toString()?
+        if (motionDom.isGenerator(options.type)) {
+            const generatorOptions = motionDom.createGeneratorEasing(options, 100, options.type);
+            options.ease = motionDom.supportsLinearEasing()
+                ? generatorOptions.ease
+                : defaultEasing;
+            options.duration = motionUtils.secondsToMilliseconds(generatorOptions.duration);
+            options.type = "keyframes";
+        }
+        else {
+            options.ease = options.ease || defaultEasing;
+        }
+        const onFinish = () => {
+            this.setValue(element, valueName, create.getFinalKeyframe(valueKeyframes, options));
+            this.cancel();
+            this.resolveFinishedPromise();
         };
-        const listener = () => {
-            create.frame.read(measureAll, false, true);
-            create.frame.read(updateAll, false, true);
-            create.frame.update(notifyAll, false, true);
+        const init = () => {
+            this.setValue = isCSSVar ? setCSSVar : setStyle;
+            this.options = options;
+            this.updateFinishedPromise();
+            this.removeAnimation = () => {
+                const elementState = state.get(element);
+                elementState && elementState.delete(valueName);
+            };
         };
-        scrollListeners.set(container, listener);
-        const target = getEventTarget(container);
-        window.addEventListener("resize", listener, { passive: true });
-        if (container !== document.documentElement) {
-            resizeListeners.set(container, resize(container, listener));
+        if (!create.supportsWaapi()) {
+            super();
+            init();
+            onFinish();
+        }
+        else {
+            super(create.startWaapiAnimation(element, valueName, valueKeyframes, options));
+            init();
+            if (options.autoplay === false) {
+                this.animation.pause();
+            }
+            this.animation.onfinish = onFinish;
+            getElementAnimationState(element).set(valueName, this);
         }
-        target.addEventListener("scroll", listener, { passive: true });
     }
-    const listener = scrollListeners.get(container);
-    create.frame.read(listener, false, true);
-    return () => {
-        var _a;
-        create.cancelFrame(listener);
-        /**
-         * Check if we even have any handlers for this container.
-         */
-        const currentHandlers = onScrollHandlers.get(container);
-        if (!currentHandlers)
-            return;
-        currentHandlers.delete(containerHandler);
-        if (currentHandlers.size)
-            return;
-        /**
-         * If no more handlers, remove the scroll listener too.
-         */
-        const scrollListener = scrollListeners.get(container);
-        scrollListeners.delete(container);
-        if (scrollListener) {
-            getEventTarget(container).removeEventListener("scroll", scrollListener);
-            (_a = resizeListeners.get(container)) === null || _a === void 0 ? void 0 : _a();
-            window.removeEventListener("resize", scrollListener);
+    /**
+     * Allows the returned animation to be awaited or promise-chained. Currently
+     * resolves when the animation finishes at all but in a future update could/should
+     * reject if its cancels.
+     */
+    then(resolve, reject) {
+        return this.currentFinishedPromise.then(resolve, reject);
+    }
+    updateFinishedPromise() {
+        this.currentFinishedPromise = new Promise((resolve) => {
+            this.resolveFinishedPromise = resolve;
+        });
+    }
+    play() {
+        if (this.state === "finished") {
+            this.updateFinishedPromise();
         }
-    };
-}
-
-function scrollTimelineFallback({ source, container, axis = "y", }) {
-    // Support legacy source argument. Deprecate later.
-    if (source)
-        container = source;
-    // ScrollTimeline records progress as a percentage CSSUnitValue
-    const currentTime = { value: 0 };
-    const cancel = scrollInfo((info) => {
-        currentTime.value = info[axis].progress * 100;
-    }, { container, axis });
-    return { currentTime, cancel };
-}
-const timelineCache = new Map();
-function getTimeline({ source, container = document.documentElement, axis = "y", } = {}) {
-    // Support legacy source argument. Deprecate later.
-    if (source)
-        container = source;
-    if (!timelineCache.has(container)) {
-        timelineCache.set(container, {});
+        super.play();
     }
-    const elementCache = timelineCache.get(container);
-    if (!elementCache[axis]) {
-        elementCache[axis] = motionDom.supportsScrollTimeline()
-            ? new ScrollTimeline({ source: container, axis })
-            : scrollTimelineFallback({ source: container, axis });
+    cancel() {
+        this.removeAnimation();
+        super.cancel();
     }
-    return elementCache[axis];
-}
-/**
- * If the onScroll function has two arguments, it's expecting
- * more specific information about the scroll from scrollInfo.
- */
-function isOnScrollWithInfo(onScroll) {
-    return onScroll.length === 2;
-}
-/**
- * Currently, we only support element tracking with `scrollInfo`, though in
- * the future we can also offer ViewTimeline support.
- */
-function needsElementTracking(options) {
-    return options && (options.target || options.offset);
 }
-function scrollFunction(onScroll, options) {
-    if (isOnScrollWithInfo(onScroll) || needsElementTracking(options)) {
-        return scrollInfo((info) => {
-            onScroll(info[options.axis].progress, info);
-        }, options);
+
+function animateElements(elementOrSelector, keyframes, options, scope) {
+    const elements = motionDom.resolveElements(elementOrSelector, scope);
+    const numElements = elements.length;
+    motionUtils.invariant(Boolean(numElements), "No valid element provided.");
+    const animations = [];
+    for (let i = 0; i < numElements; i++) {
+        const element = elements[i];
+        const elementTransition = { ...options };
+        /**
+         * Resolve stagger function if provided.
+         */
+        if (typeof elementTransition.delay === "function") {
+            elementTransition.delay = elementTransition.delay(i, numElements);
+        }
+        for (const valueName in keyframes) {
+            const valueKeyframes = keyframes[valueName];
+            const valueOptions = {
+                ...motionDom.getValueTransition(elementTransition, valueName),
+            };
+            valueOptions.duration = valueOptions.duration
+                ? motionUtils.secondsToMilliseconds(valueOptions.duration)
+                : valueOptions.duration;
+            valueOptions.delay = motionUtils.secondsToMilliseconds(valueOptions.delay || 0);
+            valueOptions.allowFlatten =
+                !elementTransition.type && !elementTransition.ease;
+            animations.push(new NativeAnimation(element, valueName, valueKeyframes, valueOptions));
+        }
     }
-    else {
-        return observeTimeline(onScroll, getTimeline(options));
+    return animations;
+}
+
+const createScopedWaapiAnimate = (scope) => {
+    function scopedAnimate(elementOrSelector, keyframes, options) {
+        return new motionDom.GroupPlaybackControls(animateElements(elementOrSelector, keyframes, options, scope));
     }
+    return scopedAnimate;
+};
+const animateMini = /*@__PURE__*/ createScopedWaapiAnimate();
+
+function observeTimeline(update, timeline) {
+    let prevProgress;
+    const onFrame = () => {
+        const { currentTime } = timeline;
+        const percentage = currentTime === null ? 0 : currentTime.value;
+        const progress = percentage / 100;
+        if (prevProgress !== progress) {
+            update(progress);
+        }
+        prevProgress = progress;
+    };
+    motionDom.frame.update(onFrame, true);
+    return () => motionDom.cancelFrame(onFrame);
 }
-function scrollAnimation(animation, options) {
-    animation.flatten();
-    if (needsElementTracking(options)) {
-        animation.pause();
-        return scrollInfo((info) => {
-            animation.time = animation.duration * info[options.axis].progress;
-        }, options);
+
+const resizeHandlers = new WeakMap();
+let observer;
+function getElementSize(target, borderBoxSize) {
+    if (borderBoxSize) {
+        const { inlineSize, blockSize } = borderBoxSize[0];
+        return { width: inlineSize, height: blockSize };
+    }
+    else if (target instanceof SVGElement && "getBBox" in target) {
+        return target.getBBox();
     }
     else {
-        const timeline = getTimeline(options);
-        if (animation.attachTimeline) {
-            return animation.attachTimeline(timeline, (valueAnimation) => {
-                valueAnimation.pause();
-                return observeTimeline((progress) => {
-                    valueAnimation.time = valueAnimation.duration * progress;
-                }, timeline);
-            });
-        }
-        else {
-            return motionUtils.noop;
-        }
+        return {
+            width: target.offsetWidth,
+            height: target.offsetHeight,
+        };
     }
 }
-function scroll(onScroll, { axis = "y", ...options } = {}) {
-    const optionsWithDefaults = { axis, ...options };
-    return typeof onScroll === "function"
-        ? scrollFunction(onScroll, optionsWithDefaults)
-        : scrollAnimation(onScroll, optionsWithDefaults);
+function notifyTarget({ target, contentRect, borderBoxSize, }) {
+    var _a;
+    (_a = resizeHandlers.get(target)) === null || _a === void 0 ? void 0 : _a.forEach((handler) => {
+        handler({
+            target,
+            contentSize: contentRect,
+            get size() {
+                return getElementSize(target, borderBoxSize);
+            },
+        });
+    });
 }
-
-const thresholds = {
-    some: 0,
-    all: 1,
-};
-function inView(elementOrSelector, onStart, { root, margin: rootMargin, amount = "some" } = {}) {
-    const elements = motionDom.resolveElements(elementOrSelector);
-    const activeIntersections = new WeakMap();
-    const onIntersectionChange = (entries) => {
-        entries.forEach((entry) => {
-            const onEnd = activeIntersections.get(entry.target);
-            /**
-             * If there's no change to the intersection, we don't need to
-             * do anything here.
-             */
-            if (entry.isIntersecting === Boolean(onEnd))
-                return;
-            if (entry.isIntersecting) {
-                const newOnEnd = onStart(entry.target, entry);
-                if (typeof newOnEnd === "function") {
-                    activeIntersections.set(entry.target, newOnEnd);
-                }
-                else {
-                    observer.unobserve(entry.target);
-                }
-            }
-            else if (typeof onEnd === "function") {
-                onEnd(entry);
-                activeIntersections.delete(entry.target);
+function notifyAll(entries) {
+    entries.forEach(notifyTarget);
+}
+function createResizeObserver() {
+    if (typeof ResizeObserver === "undefined")
+        return;
+    observer = new ResizeObserver(notifyAll);
+}
+function resizeElement(target, handler) {
+    if (!observer)
+        createResizeObserver();
+    const elements = motionDom.resolveElements(target);
+    elements.forEach((element) => {
+        let elementHandlers = resizeHandlers.get(element);
+        if (!elementHandlers) {
+            elementHandlers = new Set();
+            resizeHandlers.set(element, elementHandlers);
+        }
+        elementHandlers.add(handler);
+        observer === null || observer === void 0 ? void 0 : observer.observe(element);
+    });
+    return () => {
+        elements.forEach((element) => {
+            const elementHandlers = resizeHandlers.get(element);
+            elementHandlers === null || elementHandlers === void 0 ? void 0 : elementHandlers.delete(handler);
+            if (!(elementHandlers === null || elementHandlers === void 0 ? void 0 : elementHandlers.size)) {
+                observer === null || observer === void 0 ? void 0 : observer.unobserve(element);
             }
         });
     };
-    const observer = new IntersectionObserver(onIntersectionChange, {
-        root,
-        rootMargin,
-        threshold: typeof amount === "number" ? amount : thresholds[amount],
-    });
-    elements.forEach((element) => observer.observe(element));
-    return () => observer.disconnect();
 }
 
-function steps(numSteps, direction = "end") {
-    return (progress) => {
-        progress =
-            direction === "end"
-                ? Math.min(progress, 0.999)
-                : Math.max(progress, 0.001);
-        const expanded = progress * numSteps;
-        const rounded = direction === "end" ? Math.floor(expanded) : Math.ceil(expanded);
-        return create.clamp(0, 1, rounded / numSteps);
+const windowCallbacks = new Set();
+let windowResizeHandler;
+function createWindowResizeHandler() {
+    windowResizeHandler = () => {
+        const size = {
+            width: window.innerWidth,
+            height: window.innerHeight,
+        };
+        const info = {
+            target: window,
+            size,
+            contentSize: size,
+        };
+        windowCallbacks.forEach((callback) => callback(info));
     };
+    window.addEventListener("resize", windowResizeHandler);
 }
-
-function getOriginIndex(from, total) {
-    if (from === "first") {
-        return 0;
-    }
-    else {
-        const lastIndex = total - 1;
-        return from === "last" ? lastIndex : lastIndex / 2;
-    }
-}
-function stagger(duration = 0.1, { startDelay = 0, from = 0, ease } = {}) {
-    return (i, total) => {
-        const fromIndex = typeof from === "number" ? from : getOriginIndex(from, total);
-        const distance = Math.abs(fromIndex - i);
-        let delay = duration * distance;
-        if (ease) {
-            const maxDelay = total * duration;
-            const easingFunction = create.easingDefinitionToFunction(ease);
-            delay = easingFunction(delay / maxDelay) * maxDelay;
+function resizeWindow(callback) {
+    windowCallbacks.add(callback);
+    if (!windowResizeHandler)
+        createWindowResizeHandler();
+    return () => {
+        windowCallbacks.delete(callback);
+        if (!windowCallbacks.size && windowResizeHandler) {
+            windowResizeHandler = undefined;
         }
-        return startDelay + delay;
     };
 }
 
-const isCustomValueType = (v) => {
-    return v && typeof v === "object" && v.mix;
+function resize(a, b) {
+    return typeof a === "function" ? resizeWindow(a) : resizeElement(a, b);
+}
+
+/**
+ * A time in milliseconds, beyond which we consider the scroll velocity to be 0.
+ */
+const maxElapsed = 50;
+const createAxisInfo = () => ({
+    current: 0,
+    offset: [],
+    progress: 0,
+    scrollLength: 0,
+    targetOffset: 0,
+    targetLength: 0,
+    containerLength: 0,
+    velocity: 0,
+});
+const createScrollInfo = () => ({
+    time: 0,
+    x: createAxisInfo(),
+    y: createAxisInfo(),
+});
+const keys = {
+    x: {
+        length: "Width",
+        position: "Left",
+    },
+    y: {
+        length: "Height",
+        position: "Top",
+    },
 };
-const getMixer = (v) => (isCustomValueType(v) ? v.mix : undefined);
-function transform(...args) {
-    const useImmediate = !Array.isArray(args[0]);
-    const argOffset = useImmediate ? 0 : -1;
-    const inputValue = args[0 + argOffset];
-    const inputRange = args[1 + argOffset];
-    const outputRange = args[2 + argOffset];
-    const options = args[3 + argOffset];
-    const interpolator = create.interpolate(inputRange, outputRange, {
-        mixer: getMixer(outputRange[0]),
-        ...options,
-    });
-    return useImmediate ? interpolator(inputValue) : interpolator;
+function updateAxisInfo(element, axisName, info, time) {
+    const axis = info[axisName];
+    const { length, position } = keys[axisName];
+    const prev = axis.current;
+    const prevTime = info.time;
+    axis.current = element[`scroll${position}`];
+    axis.scrollLength = element[`scroll${length}`] - element[`client${length}`];
+    axis.offset.length = 0;
+    axis.offset[0] = 0;
+    axis.offset[1] = axis.scrollLength;
+    axis.progress = motionUtils.progress(0, axis.scrollLength, axis.current);
+    const elapsed = time - prevTime;
+    axis.velocity =
+        elapsed > maxElapsed
+            ? 0
+            : motionUtils.velocityPerSecond(axis.current - prev, elapsed);
+}
+function updateScrollInfo(element, info, time) {
+    updateAxisInfo(element, "x", info, time);
+    updateAxisInfo(element, "y", info, time);
+    info.time = time;
 }
 
-/**
- * @deprecated
- *
- * Import as `frame` instead.
- */
-const sync = create.frame;
-/**
- * @deprecated
- *
- * Use cancelFrame(callback) instead.
- */
-const cancelSync = create.stepsOrder.reduce((acc, key) => {
-    acc[key] = (process) => create.cancelFrame(process);
-    return acc;
-}, {});
-
-const shouldInheritGroup = (inherit) => inherit === true;
-const shouldInheritId = (inherit) => shouldInheritGroup(inherit === true) || inherit === "id";
-const LayoutGroup = ({ children, id, inherit = true }) => {
-    const layoutGroupContext = React.useContext(create.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;
+function calcInset(element, container) {
+    const inset = { x: 0, y: 0 };
+    let current = element;
+    while (current && current !== container) {
+        if (current instanceof HTMLElement) {
+            inset.x += current.offsetLeft;
+            inset.y += current.offsetTop;
+            current = current.offsetParent;
+        }
+        else if (current.tagName === "svg") {
+            /**
+             * This isn't an ideal approach to measuring the offset of <svg /> tags.
+             * It would be preferable, given they behave like HTMLElements in most ways
+             * to use offsetLeft/Top. But these don't exist on <svg />. Likewise we
+             * can't use .getBBox() like most SVG elements as these provide the offset
+             * relative to the SVG itself, which for <svg /> is usually 0x0.
+             */
+            const svgBoundingBox = current.getBoundingClientRect();
+            current = current.parentElement;
+            const parentBoundingBox = current.getBoundingClientRect();
+            inset.x += svgBoundingBox.left - parentBoundingBox.left;
+            inset.y += svgBoundingBox.top - parentBoundingBox.top;
+        }
+        else if (current instanceof SVGGraphicsElement) {
+            const { x, y } = current.getBBox();
+            inset.x += x;
+            inset.y += y;
+            let svg = null;
+            let parent = current.parentNode;
+            while (!svg) {
+                if (parent.tagName === "svg") {
+                    svg = parent;
+                }
+                parent = current.parentNode;
+            }
+            current = svg;
+        }
+        else {
+            break;
         }
-        context.current = {
-            id,
-            group: shouldInheritGroup(inherit)
-                ? layoutGroupContext.group || nodeGroup()
-                : nodeGroup(),
-        };
     }
-    const memoizedContext = React.useMemo(() => ({ ...context.current, forceRender }), [key]);
-    return (jsxRuntime.jsx(create.LayoutGroupContext.Provider, { value: memoizedContext, children: children }));
-};
+    return inset;
+}
 
-/**
- * Used in conjunction with the `m` component to reduce bundle size.
- *
- * `m` is a version of the `motion` component that only loads functionality
- * critical for the initial render.
- *
- * `LazyMotion` can then be used to either synchronously or asynchronously
- * load animation and gesture support.
- *
- * ```jsx
- * // Synchronous loading
- * import { LazyMotion, m, domAnimation } from "framer-motion"
- *
- * function App() {
- *   return (
- *     <LazyMotion features={domAnimation}>
- *       <m.div animate={{ scale: 2 }} />
- *     </LazyMotion>
- *   )
- * }
- *
- * // Asynchronous loading
- * import { LazyMotion, m } from "framer-motion"
- *
- * function App() {
- *   return (
- *     <LazyMotion features={() => import('./path/to/domAnimation')}>
- *       <m.div animate={{ scale: 2 }} />
- *     </LazyMotion>
- *   )
- * }
- * ```
- *
- * @public
- */
-function LazyMotion({ children, features, strict = false }) {
-    const [, setIsLoaded] = React.useState(!isLazyBundle(features));
-    const loadedRenderer = React.useRef(undefined);
+const namedEdges = {
+    start: 0,
+    center: 0.5,
+    end: 1,
+};
+function resolveEdge(edge, length, inset = 0) {
+    let delta = 0;
     /**
-     * If this is a synchronous load, load features immediately
+     * If we have this edge defined as a preset, replace the definition
+     * with the numerical value.
      */
-    if (!isLazyBundle(features)) {
-        const { renderer, ...loadedFeatures } = features;
-        loadedRenderer.current = renderer;
-        create.loadFeatures(loadedFeatures);
+    if (edge in namedEdges) {
+        edge = namedEdges[edge];
     }
-    React.useEffect(() => {
-        if (isLazyBundle(features)) {
-            features().then(({ renderer, ...loadedFeatures }) => {
-                create.loadFeatures(loadedFeatures);
-                loadedRenderer.current = renderer;
-                setIsLoaded(true);
-            });
+    /**
+     * Handle unit values
+     */
+    if (typeof edge === "string") {
+        const asNumber = parseFloat(edge);
+        if (edge.endsWith("px")) {
+            delta = asNumber;
         }
-    }, []);
-    return (jsxRuntime.jsx(create.LazyContext.Provider, { value: { renderer: loadedRenderer.current, strict }, children: children }));
+        else if (edge.endsWith("%")) {
+            edge = asNumber / 100;
+        }
+        else if (edge.endsWith("vw")) {
+            delta = (asNumber / 100) * document.documentElement.clientWidth;
+        }
+        else if (edge.endsWith("vh")) {
+            delta = (asNumber / 100) * document.documentElement.clientHeight;
+        }
+        else {
+            edge = asNumber;
+        }
+    }
+    /**
+     * If the edge is defined as a number, handle as a progress value.
+     */
+    if (typeof edge === "number") {
+        delta = length * edge;
+    }
+    return inset + delta;
 }
-function isLazyBundle(features) {
-    return typeof features === "function";
+
+const defaultOffset = [0, 0];
+function resolveOffset(offset, containerLength, targetLength, targetInset) {
+    let offsetDefinition = Array.isArray(offset) ? offset : defaultOffset;
+    let targetPoint = 0;
+    let containerPoint = 0;
+    if (typeof offset === "number") {
+        /**
+         * If we're provided offset: [0, 0.5, 1] then each number x should become
+         * [x, x], so we default to the behaviour of mapping 0 => 0 of both target
+         * and container etc.
+         */
+        offsetDefinition = [offset, offset];
+    }
+    else if (typeof offset === "string") {
+        offset = offset.trim();
+        if (offset.includes(" ")) {
+            offsetDefinition = offset.split(" ");
+        }
+        else {
+            /**
+             * If we're provided a definition like "100px" then we want to apply
+             * that only to the top of the target point, leaving the container at 0.
+             * Whereas a named offset like "end" should be applied to both.
+             */
+            offsetDefinition = [offset, namedEdges[offset] ? offset : `0`];
+        }
+    }
+    targetPoint = resolveEdge(offsetDefinition[0], targetLength, targetInset);
+    containerPoint = resolveEdge(offsetDefinition[1], containerLength);
+    return targetPoint - containerPoint;
 }
 
-/**
- * `MotionConfig` is used to set configuration options for all children `motion` components.
- *
- * ```jsx
- * import { motion, MotionConfig } from "framer-motion"
- *
- * export function App() {
- *   return (
- *     <MotionConfig transition={{ type: "spring" }}>
- *       <motion.div animate={{ x: 100 }} />
- *     </MotionConfig>
- *   )
- * }
- * ```
- *
- * @public
- */
-function MotionConfig({ children, isValidProp, ...config }) {
-    isValidProp && create.loadExternalIsValidProp(isValidProp);
+const ScrollOffset = {
+    Enter: [
+        [0, 1],
+        [1, 1],
+    ],
+    Exit: [
+        [0, 0],
+        [1, 0],
+    ],
+    Any: [
+        [1, 0],
+        [0, 1],
+    ],
+    All: [
+        [0, 0],
+        [1, 1],
+    ],
+};
+
+const point = { x: 0, y: 0 };
+function getTargetSize(target) {
+    return "getBBox" in target && target.tagName !== "svg"
+        ? target.getBBox()
+        : { width: target.clientWidth, height: target.clientHeight };
+}
+function resolveOffsets(container, info, options) {
+    const { offset: offsetDefinition = ScrollOffset.All } = options;
+    const { target = container, axis = "y" } = options;
+    const lengthLabel = axis === "y" ? "height" : "width";
+    const inset = target !== container ? calcInset(target, container) : point;
+    /**
+     * Measure the target and container. If they're the same thing then we
+     * use the container's scrollWidth/Height as the target, from there
+     * all other calculations can remain the same.
+     */
+    const targetSize = target === container
+        ? { width: container.scrollWidth, height: container.scrollHeight }
+        : getTargetSize(target);
+    const containerSize = {
+        width: container.clientWidth,
+        height: container.clientHeight,
+    };
     /**
-     * Inherit props from any parent MotionConfig components
+     * Reset the length of the resolved offset array rather than creating a new one.
+     * TODO: More reusable data structures for targetSize/containerSize would also be good.
      */
-    config = { ...React.useContext(create.MotionConfigContext), ...config };
+    info[axis].offset.length = 0;
     /**
-     * Don't allow isStatic to change between renders as it affects how many hooks
-     * motion components fire.
+     * Populate the offset array by resolving the user's offset definition into
+     * a list of pixel scroll offets.
      */
-    config.isStatic = create.useConstant(() => config.isStatic);
+    let hasChanged = !info[axis].interpolate;
+    const numOffsets = offsetDefinition.length;
+    for (let i = 0; i < numOffsets; i++) {
+        const offset = resolveOffset(offsetDefinition[i], containerSize[lengthLabel], targetSize[lengthLabel], inset[axis]);
+        if (!hasChanged && offset !== info[axis].interpolatorOffsets[i]) {
+            hasChanged = true;
+        }
+        info[axis].offset[i] = offset;
+    }
     /**
-     * Creating a new config context object will re-render every `motion` component
-     * every time it renders. So we only want to create a new one sparingly.
+     * If the pixel scroll offsets have changed, create a new interpolator function
+     * to map scroll value into a progress.
      */
-    const context = React.useMemo(() => config, [
-        JSON.stringify(config.transition),
-        config.transformPagePoint,
-        config.reducedMotion,
-    ]);
-    return (jsxRuntime.jsx(create.MotionConfigContext.Provider, { value: context, children: children }));
+    if (hasChanged) {
+        info[axis].interpolate = create.interpolate(info[axis].offset, create.defaultOffset(offsetDefinition), { clamp: false });
+        info[axis].interpolatorOffsets = [...info[axis].offset];
+    }
+    info[axis].progress = create.clamp(0, 1, info[axis].interpolate(info[axis].current));
 }
 
-const ReorderContext = React.createContext(null);
-
-function createDOMMotionComponentProxy(componentFactory) {
-    if (typeof Proxy === "undefined") {
-        return componentFactory;
+function measure(container, target = container, info) {
+    /**
+     * Find inset of target within scrollable container
+     */
+    info.x.targetOffset = 0;
+    info.y.targetOffset = 0;
+    if (target !== container) {
+        let node = target;
+        while (node && node !== container) {
+            info.x.targetOffset += node.offsetLeft;
+            info.y.targetOffset += node.offsetTop;
+            node = node.offsetParent;
+        }
     }
+    info.x.targetLength =
+        target === container ? target.scrollWidth : target.clientWidth;
+    info.y.targetLength =
+        target === container ? target.scrollHeight : target.clientHeight;
+    info.x.containerLength = container.clientWidth;
+    info.y.containerLength = container.clientHeight;
     /**
-     * A cache of generated `motion` components, e.g `motion.div`, `motion.input` etc.
-     * Rather than generating them anew every render.
+     * In development mode ensure scroll containers aren't position: static as this makes
+     * it difficult to measure their relative positions.
      */
-    const componentCache = new Map();
-    const deprecatedFactoryFunction = (...args) => {
-        if (process.env.NODE_ENV !== "production") {
-            create.warnOnce(false, "motion() is deprecated. Use motion.create() instead.");
+    if (process.env.NODE_ENV !== "production") {
+        if (container && target && target !== container) {
+            motionUtils.warnOnce(getComputedStyle(container).position !== "static", "Please ensure that the container has a non-static position, like 'relative', 'fixed', or 'absolute' to ensure scroll offset is calculated correctly.");
         }
-        return componentFactory(...args);
-    };
-    return new Proxy(deprecatedFactoryFunction, {
-        /**
-         * Called when `motion` is referenced with a prop: `motion.div`, `motion.input` etc.
-         * The prop name is passed through as `key` and we can use that to generate a `motion`
-         * DOM component with that name.
-         */
-        get: (_target, key) => {
-            if (key === "create")
-                return componentFactory;
-            /**
-             * If this element doesn't exist in the component cache, create it and cache.
-             */
-            if (!componentCache.has(key)) {
-                componentCache.set(key, componentFactory(key));
+    }
+}
+function createOnScrollHandler(element, onScroll, info, options = {}) {
+    return {
+        measure: () => measure(element, options.target, info),
+        update: (time) => {
+            updateScrollInfo(element, info, time);
+            if (options.offset || options.target) {
+                resolveOffsets(element, info, options);
             }
-            return componentCache.get(key);
         },
-    });
+        notify: () => onScroll(info),
+    };
 }
 
-const motion = /*@__PURE__*/ createDOMMotionComponentProxy(create.createMotionComponent);
-
-function checkReorder(order, value, offset, velocity) {
-    if (!velocity)
-        return order;
-    const index = order.findIndex((item) => item.value === value);
-    if (index === -1)
-        return order;
-    const nextOffset = velocity > 0 ? 1 : -1;
-    const nextItem = order[index + nextOffset];
-    if (!nextItem)
-        return order;
-    const item = order[index];
-    const nextLayout = nextItem.layout;
-    const nextItemCenter = create.mixNumber(nextLayout.min, nextLayout.max, 0.5);
-    if ((nextOffset === 1 && item.layout.max + offset > nextItemCenter) ||
-        (nextOffset === -1 && item.layout.min + offset < nextItemCenter)) {
-        return create.moveItem(order, index, index + nextOffset);
+const scrollListeners = new WeakMap();
+const resizeListeners = new WeakMap();
+const onScrollHandlers = new WeakMap();
+const getEventTarget = (element) => element === document.documentElement ? window : element;
+function scrollInfo(onScroll, { container = document.documentElement, ...options } = {}) {
+    let containerHandlers = onScrollHandlers.get(container);
+    /**
+     * Get the onScroll handlers for this container.
+     * If one isn't found, create a new one.
+     */
+    if (!containerHandlers) {
+        containerHandlers = new Set();
+        onScrollHandlers.set(container, containerHandlers);
     }
-    return order;
-}
-
-function ReorderGroupComponent({ children, as = "ul", axis = "y", onReorder, values, ...props }, externalRef) {
-    const Component = create.useConstant(() => motion[as]);
-    const order = [];
-    const isReordering = React.useRef(false);
-    motionUtils.invariant(Boolean(values), "Reorder.Group must be provided a values prop");
-    const context = {
-        axis,
-        registerItem: (value, layout) => {
-            // If the entry was already added, update it rather than adding it again
-            const idx = order.findIndex((entry) => value === entry.value);
-            if (idx !== -1) {
-                order[idx].layout = layout[axis];
-            }
-            else {
-                order.push({ value: value, layout: layout[axis] });
-            }
-            order.sort(compareMin);
-        },
-        updateOrder: (item, offset, velocity) => {
-            if (isReordering.current)
-                return;
-            const newOrder = checkReorder(order, item, offset, velocity);
-            if (order !== newOrder) {
-                isReordering.current = true;
-                onReorder(newOrder
-                    .map(getValue)
-                    .filter((value) => values.indexOf(value) !== -1));
+    /**
+     * Create a new onScroll handler for the provided callback.
+     */
+    const info = createScrollInfo();
+    const containerHandler = createOnScrollHandler(container, onScroll, info, options);
+    containerHandlers.add(containerHandler);
+    /**
+     * Check if there's a scroll event listener for this container.
+     * If not, create one.
+     */
+    if (!scrollListeners.has(container)) {
+        const measureAll = () => {
+            for (const handler of containerHandlers)
+                handler.measure();
+        };
+        const updateAll = () => {
+            for (const handler of containerHandlers) {
+                handler.update(motionDom.frameData.timestamp);
             }
-        },
+        };
+        const notifyAll = () => {
+            for (const handler of containerHandlers)
+                handler.notify();
+        };
+        const listener = () => {
+            motionDom.frame.read(measureAll, false, true);
+            motionDom.frame.read(updateAll, false, true);
+            motionDom.frame.update(notifyAll, false, true);
+        };
+        scrollListeners.set(container, listener);
+        const target = getEventTarget(container);
+        window.addEventListener("resize", listener, { passive: true });
+        if (container !== document.documentElement) {
+            resizeListeners.set(container, resize(container, listener));
+        }
+        target.addEventListener("scroll", listener, { passive: true });
+    }
+    const listener = scrollListeners.get(container);
+    motionDom.frame.read(listener, false, true);
+    return () => {
+        var _a;
+        motionDom.cancelFrame(listener);
+        /**
+         * Check if we even have any handlers for this container.
+         */
+        const currentHandlers = onScrollHandlers.get(container);
+        if (!currentHandlers)
+            return;
+        currentHandlers.delete(containerHandler);
+        if (currentHandlers.size)
+            return;
+        /**
+         * If no more handlers, remove the scroll listener too.
+         */
+        const scrollListener = scrollListeners.get(container);
+        scrollListeners.delete(container);
+        if (scrollListener) {
+            getEventTarget(container).removeEventListener("scroll", scrollListener);
+            (_a = resizeListeners.get(container)) === null || _a === void 0 ? void 0 : _a();
+            window.removeEventListener("resize", scrollListener);
+        }
     };
-    React.useEffect(() => {
-        isReordering.current = false;
-    });
-    return (jsxRuntime.jsx(Component, { ...props, ref: externalRef, ignoreStrict: true, children: jsxRuntime.jsx(ReorderContext.Provider, { value: context, children: children }) }));
 }
-const ReorderGroup = /*@__PURE__*/ React.forwardRef(ReorderGroupComponent);
-function getValue(item) {
-    return item.value;
+
+function scrollTimelineFallback({ source, container, axis = "y", }) {
+    // Support legacy source argument. Deprecate later.
+    if (source)
+        container = source;
+    // ScrollTimeline records progress as a percentage CSSUnitValue
+    const currentTime = { value: 0 };
+    const cancel = scrollInfo((info) => {
+        currentTime.value = info[axis].progress * 100;
+    }, { container, axis });
+    return { currentTime, cancel };
 }
-function compareMin(a, b) {
-    return a.layout.min - b.layout.min;
+const timelineCache = new Map();
+function getTimeline({ source, container = document.documentElement, axis = "y", } = {}) {
+    // Support legacy source argument. Deprecate later.
+    if (source)
+        container = source;
+    if (!timelineCache.has(container)) {
+        timelineCache.set(container, {});
+    }
+    const elementCache = timelineCache.get(container);
+    if (!elementCache[axis]) {
+        elementCache[axis] = motionDom.supportsScrollTimeline()
+            ? new ScrollTimeline({ source: container, axis })
+            : scrollTimelineFallback({ source: container, axis });
+    }
+    return elementCache[axis];
+}
+/**
+ * If the onScroll function has two arguments, it's expecting
+ * more specific information about the scroll from scrollInfo.
+ */
+function isOnScrollWithInfo(onScroll) {
+    return onScroll.length === 2;
 }
-
 /**
- * Creates a `MotionValue` to track the state and velocity of a value.
- *
- * Usually, these are created automatically. For advanced use-cases, like use with `useTransform`, you can create `MotionValue`s externally and pass them into the animated component via the `style` prop.
- *
- * ```jsx
- * export const MyComponent = () => {
- *   const scale = useMotionValue(1)
- *
- *   return <motion.div style={{ scale }} />
- * }
- * ```
- *
- * @param initial - The initial state.
- *
- * @public
+ * Currently, we only support element tracking with `scrollInfo`, though in
+ * the future we can also offer ViewTimeline support.
  */
-function useMotionValue(initial) {
-    const value = create.useConstant(() => create.motionValue(initial));
-    /**
-     * If this motion value is being used in static mode, like on
-     * the Framer canvas, force components to rerender when the motion
-     * value is updated.
-     */
-    const { isStatic } = React.useContext(create.MotionConfigContext);
-    if (isStatic) {
-        const [, setLatest] = React.useState(initial);
-        React.useEffect(() => value.on("change", setLatest), []);
+function needsElementTracking(options) {
+    return options && (options.target || options.offset);
+}
+function scrollFunction(onScroll, options) {
+    if (isOnScrollWithInfo(onScroll) || needsElementTracking(options)) {
+        return scrollInfo((info) => {
+            onScroll(info[options.axis].progress, info);
+        }, options);
     }
-    return value;
+    else {
+        return observeTimeline(onScroll, getTimeline(options));
+    }
+}
+function scrollAnimation(animation, options) {
+    animation.flatten();
+    if (needsElementTracking(options)) {
+        animation.pause();
+        return scrollInfo((info) => {
+            animation.time = animation.duration * info[options.axis].progress;
+        }, options);
+    }
+    else {
+        const timeline = getTimeline(options);
+        if (animation.attachTimeline) {
+            return animation.attachTimeline(timeline, (valueAnimation) => {
+                valueAnimation.pause();
+                return observeTimeline((progress) => {
+                    valueAnimation.time = valueAnimation.duration * progress;
+                }, timeline);
+            });
+        }
+        else {
+            return motionUtils.noop;
+        }
+    }
+}
+function scroll(onScroll, { axis = "y", ...options } = {}) {
+    const optionsWithDefaults = { axis, ...options };
+    return typeof onScroll === "function"
+        ? scrollFunction(onScroll, optionsWithDefaults)
+        : scrollAnimation(onScroll, optionsWithDefaults);
 }
 
-function useCombineMotionValues(values, combineValues) {
-    /**
-     * Initialise the returned motion value. This remains the same between renders.
-     */
-    const value = useMotionValue(combineValues());
-    /**
-     * Create a function that will update the template motion value with the latest values.
-     * This is pre-bound so whenever a motion value updates it can schedule its
-     * execution in Framesync. If it's already been scheduled it won't be fired twice
-     * in a single frame.
-     */
-    const updateValue = () => value.set(combineValues());
-    /**
-     * Synchronously update the motion value with the latest values during the render.
-     * This ensures that within a React render, the styles applied to the DOM are up-to-date.
-     */
-    updateValue();
-    /**
-     * Subscribe to all motion values found within the template. Whenever any of them change,
-     * schedule an update.
-     */
-    create.useIsomorphicLayoutEffect(() => {
-        const scheduleUpdate = () => create.frame.preRender(updateValue, false, true);
-        const subscriptions = values.map((v) => v.on("change", scheduleUpdate));
-        return () => {
-            subscriptions.forEach((unsubscribe) => unsubscribe());
-            create.cancelFrame(updateValue);
-        };
+const thresholds = {
+    some: 0,
+    all: 1,
+};
+function inView(elementOrSelector, onStart, { root, margin: rootMargin, amount = "some" } = {}) {
+    const elements = motionDom.resolveElements(elementOrSelector);
+    const activeIntersections = new WeakMap();
+    const onIntersectionChange = (entries) => {
+        entries.forEach((entry) => {
+            const onEnd = activeIntersections.get(entry.target);
+            /**
+             * If there's no change to the intersection, we don't need to
+             * do anything here.
+             */
+            if (entry.isIntersecting === Boolean(onEnd))
+                return;
+            if (entry.isIntersecting) {
+                const newOnEnd = onStart(entry.target, entry);
+                if (typeof newOnEnd === "function") {
+                    activeIntersections.set(entry.target, newOnEnd);
+                }
+                else {
+                    observer.unobserve(entry.target);
+                }
+            }
+            else if (typeof onEnd === "function") {
+                onEnd(entry);
+                activeIntersections.delete(entry.target);
+            }
+        });
+    };
+    const observer = new IntersectionObserver(onIntersectionChange, {
+        root,
+        rootMargin,
+        threshold: typeof amount === "number" ? amount : thresholds[amount],
     });
-    return value;
+    elements.forEach((element) => observer.observe(element));
+    return () => observer.disconnect();
 }
 
-function useComputed(compute) {
-    /**
-     * Open session of collectMotionValues. Any MotionValue that calls get()
-     * will be saved into this array.
-     */
-    create.collectMotionValues.current = [];
-    compute();
-    const value = useCombineMotionValues(create.collectMotionValues.current, compute);
-    /**
-     * Synchronously close session of collectMotionValues.
-     */
-    create.collectMotionValues.current = undefined;
-    return value;
+function steps(numSteps, direction = "end") {
+    return (progress) => {
+        progress =
+            direction === "end"
+                ? Math.min(progress, 0.999)
+                : Math.max(progress, 0.001);
+        const expanded = progress * numSteps;
+        const rounded = direction === "end" ? Math.floor(expanded) : Math.ceil(expanded);
+        return create.clamp(0, 1, rounded / numSteps);
+    };
 }
 
-function useTransform(input, inputRangeOrTransformer, outputRange, options) {
-    if (typeof input === "function") {
-        return useComputed(input);
+function getOriginIndex(from, total) {
+    if (from === "first") {
+        return 0;
+    }
+    else {
+        const lastIndex = total - 1;
+        return from === "last" ? lastIndex : lastIndex / 2;
     }
-    const transformer = typeof inputRangeOrTransformer === "function"
-        ? inputRangeOrTransformer
-        : transform(inputRangeOrTransformer, outputRange, options);
-    return Array.isArray(input)
-        ? useListTransform(input, transformer)
-        : useListTransform([input], ([latest]) => transformer(latest));
 }
-function useListTransform(values, transformer) {
-    const latest = create.useConstant(() => []);
-    return useCombineMotionValues(values, () => {
-        latest.length = 0;
-        const numValues = values.length;
-        for (let i = 0; i < numValues; i++) {
-            latest[i] = values[i].get();
+function stagger(duration = 0.1, { startDelay = 0, from = 0, ease } = {}) {
+    return (i, total) => {
+        const fromIndex = typeof from === "number" ? from : getOriginIndex(from, total);
+        const distance = Math.abs(fromIndex - i);
+        let delay = duration * distance;
+        if (ease) {
+            const maxDelay = total * duration;
+            const easingFunction = create.easingDefinitionToFunction(ease);
+            delay = easingFunction(delay / maxDelay) * maxDelay;
         }
-        return transformer(latest);
-    });
-}
-
-function useDefaultMotionValue(value, defaultValue = 0) {
-    return create.isMotionValue(value) ? value : useMotionValue(defaultValue);
-}
-function ReorderItemComponent({ children, style = {}, value, as = "li", onDrag, layout = true, ...props }, externalRef) {
-    const Component = create.useConstant(() => motion[as]);
-    const context = React.useContext(ReorderContext);
-    const point = {
-        x: useDefaultMotionValue(style.x),
-        y: useDefaultMotionValue(style.y),
+        return startDelay + delay;
     };
-    const zIndex = useTransform([point.x, point.y], ([latestX, latestY]) => latestX || latestY ? 1 : "unset");
-    motionUtils.invariant(Boolean(context), "Reorder.Item must be a child of Reorder.Group");
-    const { axis, registerItem, updateOrder } = context;
-    return (jsxRuntime.jsx(Component, { drag: axis, ...props, dragSnapToOrigin: true, style: { ...style, x: point.x, y: point.y, zIndex }, layout: layout, onDrag: (event, gesturePoint) => {
-            const { velocity } = gesturePoint;
-            velocity[axis] &&
-                updateOrder(value, point[axis].get(), velocity[axis]);
-            onDrag && onDrag(event, gesturePoint);
-        }, onLayoutMeasure: (measured) => registerItem(value, measured), ref: externalRef, ignoreStrict: true, children: children }));
 }
-const ReorderItem = /*@__PURE__*/ React.forwardRef(ReorderItemComponent);
-
-var namespace = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    Group: ReorderGroup,
-    Item: ReorderItem
-});
 
 const createMinimalMotionComponent = 
 /*@__PURE__*/ create.createMotionComponentFactory();
 
 const m = /*@__PURE__*/ createDOMMotionComponentProxy(createMinimalMotionComponent);
 
+function useUnmountEffect(callback) {
+    return React.useEffect(() => () => callback(), []);
+}
+
 /**
  * @public
  */
@@ -2097,10 +2081,10 @@ function refWarning(name, ref) {
     motionUtils.warning(Boolean(!ref || ref.current), `You have defined a ${name} options but the provided ref is not yet hydrated, probably because it's defined higher up the tree. Try calling useScroll() in the same component as the ref, or setting its \`layoutEffect: false\` option.`);
 }
 const createScrollMotionValues = () => ({
-    scrollX: create.motionValue(0),
-    scrollY: create.motionValue(0),
-    scrollXProgress: create.motionValue(0),
-    scrollYProgress: create.motionValue(0),
+    scrollX: motionDom.motionValue(0),
+    scrollY: motionDom.motionValue(0),
+    scrollXProgress: motionDom.motionValue(0),
+    scrollYProgress: motionDom.motionValue(0),
 });
 function useScroll({ container, target, layoutEffect = true, ...options } = {}) {
     const values = create.useConstant(createScrollMotionValues);
@@ -2110,7 +2094,7 @@ function useScroll({ container, target, layoutEffect = true, ...options } = {})
     useLifecycleEffect(() => {
         refWarning("target", target);
         refWarning("container", container);
-        return scroll((_progress, { x, y }) => {
+        return scroll((_progress, { x, y, }) => {
             values.scrollX.set(x.current);
             values.scrollXProgress.set(x.progress);
             values.scrollY.set(y.current);
@@ -2129,7 +2113,7 @@ function useScroll({ container, target, layoutEffect = true, ...options } = {})
  */
 function useElementScroll(ref) {
     if (process.env.NODE_ENV === "development") {
-        create.warnOnce(false, "useElementScroll is deprecated. Convert to useScroll({ container: ref }).");
+        motionUtils.warnOnce(false, "useElementScroll is deprecated. Convert to useScroll({ container: ref }).");
     }
     return useScroll({ container: ref });
 }
@@ -2139,7 +2123,7 @@ function useElementScroll(ref) {
  */
 function useViewportScroll() {
     if (process.env.NODE_ENV !== "production") {
-        create.warnOnce(false, "useViewportScroll is deprecated. Convert to useScroll().");
+        motionUtils.warnOnce(false, "useViewportScroll is deprecated. Convert to useScroll().");
     }
     return useScroll();
 }
@@ -2218,7 +2202,7 @@ function useSpring(source, config = {}) {
                 return set(v);
             latestValue.current = v;
             latestSetter.current = (latest) => set(parseValue(latest, unit));
-            create.frame.postRender(startAnimation);
+            motionDom.frame.postRender(startAnimation);
             return value.get();
         }, stopAnimation);
     }, [JSON.stringify(config)]);
@@ -2247,8 +2231,8 @@ function useAnimationFrame(callback) {
                 initialTimestamp.current = timestamp;
             callback(timestamp - initialTimestamp.current, delta);
         };
-        create.frame.update(provideTimeSinceStart, true);
-        return () => create.cancelFrame(provideTimeSinceStart);
+        motionDom.frame.update(provideTimeSinceStart, true);
+        return () => motionDom.cancelFrame(provideTimeSinceStart);
     }, [callback]);
 }
 
@@ -2279,11 +2263,11 @@ function useVelocity(value) {
          * to keep checking until it is zero.
          */
         if (latest)
-            create.frame.update(updateVelocity);
+            motionDom.frame.update(updateVelocity);
     };
     useMotionValueEvent(value, "change", () => {
         // Schedule an update to this value at the end of the current frame.
-        create.frame.update(updateVelocity, false, true);
+        motionDom.frame.update(updateVelocity, false, true);
     });
     return velocity;
 }
@@ -2297,7 +2281,7 @@ function getWillChangeName(name) {
     }
 }
 
-class WillChangeMotionValue extends create.MotionValue {
+class WillChangeMotionValue extends motionDom.MotionValue {
     constructor() {
         super(...arguments);
         this.values = [];
@@ -2305,7 +2289,7 @@ class WillChangeMotionValue extends create.MotionValue {
     add(name) {
         const styleName = getWillChangeName(name);
         if (styleName) {
-            create.addUniqueItem(this.values, styleName);
+            motionUtils.addUniqueItem(this.values, styleName);
             this.update();
         }
     }
@@ -2351,7 +2335,7 @@ function useReducedMotion() {
     !create.hasReducedMotionListener.current && create.initPrefersReducedMotion();
     const [shouldReduceMotion] = React.useState(create.prefersReducedMotion.current);
     if (process.env.NODE_ENV !== "production") {
-        create.warnOnce(shouldReduceMotion !== true, "You have Reduced Motion enabled on your device. Animations may not appear as expected.");
+        motionUtils.warnOnce(shouldReduceMotion !== true, "You have Reduced Motion enabled on your device. Animations may not appear as expected.");
     }
     /**
      * TODO See if people miss automatically updating shouldReduceMotion setting
@@ -2741,7 +2725,7 @@ function useInstantTransition() {
         /**
          * Unblock after two animation frames, otherwise this will unblock too soon.
          */
-        create.frame.postRender(() => create.frame.postRender(() => {
+        motionDom.frame.postRender(() => motionDom.frame.postRender(() => {
             /**
              * If the callback has been called again after the effect
              * triggered this 2 frame delay, don't unblock animations. This
@@ -2767,14 +2751,14 @@ function disableInstantTransitions() {
     create.instantAnimationState.current = false;
 }
 
+const appearAnimationStore = new Map();
+const appearComplete = new Map();
+
 const appearStoreId = (elementId, valueName) => {
     const key = create.transformProps.has(valueName) ? "transform" : valueName;
     return `${elementId}: ${key}`;
 };
 
-const appearAnimationStore = new Map();
-const appearComplete = new Map();
-
 function handoffOptimizedAppearAnimation(elementId, valueName, frame) {
     var _a;
     const storeId = appearStoreId(elementId, valueName);
@@ -3089,8 +3073,6 @@ exports.FlatTree = create.FlatTree;
 exports.LayoutGroupContext = create.LayoutGroupContext;
 exports.MotionConfigContext = create.MotionConfigContext;
 exports.MotionContext = create.MotionContext;
-exports.MotionGlobalConfig = create.MotionGlobalConfig;
-exports.MotionValue = create.MotionValue;
 exports.PresenceContext = create.PresenceContext;
 exports.SwitchLayoutGroupContext = create.SwitchLayoutGroupContext;
 exports.VisualElement = create.VisualElement;
@@ -3106,7 +3088,6 @@ exports.backInOut = create.backInOut;
 exports.backOut = create.backOut;
 exports.buildTransform = create.buildTransform;
 exports.calcLength = create.calcLength;
-exports.cancelFrame = create.cancelFrame;
 exports.circIn = create.circIn;
 exports.circInOut = create.circInOut;
 exports.circOut = create.circOut;
@@ -3124,9 +3105,6 @@ exports.easeInOut = create.easeInOut;
 exports.easeOut = create.easeOut;
 exports.filterProps = create.filterProps;
 exports.findSpring = create.findSpring;
-exports.frame = create.frame;
-exports.frameData = create.frameData;
-exports.frameSteps = create.frameSteps;
 exports.inertia = create.inertia;
 exports.interpolate = create.interpolate;
 exports.isBrowser = create.isBrowser;
@@ -3136,29 +3114,31 @@ exports.keyframes = create.keyframes;
 exports.makeUseVisualState = create.makeUseVisualState;
 exports.mirrorEasing = create.mirrorEasing;
 exports.mix = create.mix;
-exports.motionValue = create.motionValue;
 exports.optimizedAppearDataAttribute = create.optimizedAppearDataAttribute;
 exports.pipe = create.pipe;
 exports.px = create.px;
 exports.resolveMotionValue = create.resolveMotionValue;
 exports.reverseEasing = create.reverseEasing;
 exports.spring = create.spring;
-exports.time = create.time;
 exports.useIsPresent = create.useIsPresent;
 exports.useIsomorphicLayoutEffect = create.useIsomorphicLayoutEffect;
 exports.usePresence = create.usePresence;
 exports.visualElementStore = create.visualElementStore;
-Object.defineProperty(exports, "invariant", {
+Object.defineProperty(exports, "MotionValue", {
     enumerable: true,
-    get: function () { return motionUtils.invariant; }
+    get: function () { return motionDom.MotionValue; }
 });
-Object.defineProperty(exports, "noop", {
+Object.defineProperty(exports, "cancelFrame", {
     enumerable: true,
-    get: function () { return motionUtils.noop; }
+    get: function () { return motionDom.cancelFrame; }
 });
-Object.defineProperty(exports, "progress", {
+Object.defineProperty(exports, "frame", {
     enumerable: true,
-    get: function () { return motionUtils.progress; }
+    get: function () { return motionDom.frame; }
+});
+Object.defineProperty(exports, "frameData", {
+    enumerable: true,
+    get: function () { return motionDom.frameData; }
 });
 Object.defineProperty(exports, "hover", {
     enumerable: true,
@@ -3168,10 +3148,34 @@ Object.defineProperty(exports, "isDragActive", {
     enumerable: true,
     get: function () { return motionDom.isDragActive; }
 });
+Object.defineProperty(exports, "motionValue", {
+    enumerable: true,
+    get: function () { return motionDom.motionValue; }
+});
 Object.defineProperty(exports, "press", {
     enumerable: true,
     get: function () { return motionDom.press; }
 });
+Object.defineProperty(exports, "time", {
+    enumerable: true,
+    get: function () { return motionDom.time; }
+});
+Object.defineProperty(exports, "MotionGlobalConfig", {
+    enumerable: true,
+    get: function () { return motionUtils.MotionGlobalConfig; }
+});
+Object.defineProperty(exports, "invariant", {
+    enumerable: true,
+    get: function () { return motionUtils.invariant; }
+});
+Object.defineProperty(exports, "noop", {
+    enumerable: true,
+    get: function () { return motionUtils.noop; }
+});
+Object.defineProperty(exports, "progress", {
+    enumerable: true,
+    get: function () { return motionUtils.progress; }
+});
 exports.AnimatePresence = AnimatePresence;
 exports.AnimateSharedLayout = AnimateSharedLayout;
 exports.DeprecatedLayoutGroupContext = DeprecatedLayoutGroupContext;
@@ -3183,7 +3187,6 @@ exports.Reorder = namespace;
 exports.animate = animate;
 exports.animateMini = animateMini;
 exports.animationControls = animationControls;
-exports.cancelSync = cancelSync;
 exports.createScopedAnimate = createScopedAnimate;
 exports.disableInstantTransitions = disableInstantTransitions;
 exports.domAnimation = domAnimation;
@@ -3198,7 +3201,6 @@ exports.scrollInfo = scrollInfo;
 exports.stagger = stagger;
 exports.startOptimizedAppearAnimation = startOptimizedAppearAnimation;
 exports.steps = steps;
-exports.sync = sync;
 exports.transform = transform;
 exports.unwrapMotionComponent = unwrapMotionComponent;
 exports.useAnimate = useAnimate;