framer-motion 7.7.3 → 7.8.0

package/dist/cjs/index.js

@@ -2296,176 +2296,6 @@ const instantAnimationState = {
     current: false,
 };
 
-/*
-  Detect and load appropriate clock setting for the execution environment
- */
-const defaultTimestep = (1 / 60) * 1000;
-const getCurrentTime = typeof performance !== "undefined"
-    ? () => performance.now()
-    : () => Date.now();
-const onNextFrame = typeof window !== "undefined"
-    ? (callback) => window.requestAnimationFrame(callback)
-    : (callback) => setTimeout(() => callback(getCurrentTime()), defaultTimestep);
-
-function createRenderStep(runNextFrame) {
-    /**
-     * We create and reuse two arrays, one to queue jobs for the current frame
-     * and one for the next. We reuse to avoid triggering GC after x frames.
-     */
-    let toRun = [];
-    let toRunNextFrame = [];
-    /**
-     *
-     */
-    let numToRun = 0;
-    /**
-     * Track whether we're currently processing jobs in this step. This way
-     * we can decide whether to schedule new jobs for this frame or next.
-     */
-    let isProcessing = false;
-    let flushNextFrame = false;
-    /**
-     * A set of processes which were marked keepAlive when scheduled.
-     */
-    const toKeepAlive = new WeakSet();
-    const step = {
-        /**
-         * Schedule a process to run on the next frame.
-         */
-        schedule: (callback, keepAlive = false, immediate = false) => {
-            const addToCurrentFrame = immediate && isProcessing;
-            const buffer = addToCurrentFrame ? toRun : toRunNextFrame;
-            if (keepAlive)
-                toKeepAlive.add(callback);
-            // If the buffer doesn't already contain this callback, add it
-            if (buffer.indexOf(callback) === -1) {
-                buffer.push(callback);
-                // If we're adding it to the currently running buffer, update its measured size
-                if (addToCurrentFrame && isProcessing)
-                    numToRun = toRun.length;
-            }
-            return callback;
-        },
-        /**
-         * Cancel the provided callback from running on the next frame.
-         */
-        cancel: (callback) => {
-            const index = toRunNextFrame.indexOf(callback);
-            if (index !== -1)
-                toRunNextFrame.splice(index, 1);
-            toKeepAlive.delete(callback);
-        },
-        /**
-         * Execute all schedule callbacks.
-         */
-        process: (frameData) => {
-            /**
-             * If we're already processing we've probably been triggered by a flushSync
-             * inside an existing process. Instead of executing, mark flushNextFrame
-             * as true and ensure we flush the following frame at the end of this one.
-             */
-            if (isProcessing) {
-                flushNextFrame = true;
-                return;
-            }
-            isProcessing = true;
-            [toRun, toRunNextFrame] = [toRunNextFrame, toRun];
-            // Clear the next frame list
-            toRunNextFrame.length = 0;
-            // Execute this frame
-            numToRun = toRun.length;
-            if (numToRun) {
-                for (let i = 0; i < numToRun; i++) {
-                    const callback = toRun[i];
-                    callback(frameData);
-                    if (toKeepAlive.has(callback)) {
-                        step.schedule(callback);
-                        runNextFrame();
-                    }
-                }
-            }
-            isProcessing = false;
-            if (flushNextFrame) {
-                flushNextFrame = false;
-                step.process(frameData);
-            }
-        },
-    };
-    return step;
-}
-
-const frameData = {
-    delta: 0,
-    timestamp: 0,
-};
-
-const maxElapsed = 40;
-let useDefaultElapsed = true;
-let runNextFrame = false;
-let isProcessing = false;
-const stepsOrder = [
-    "read",
-    "update",
-    "preRender",
-    "render",
-    "postRender",
-];
-const steps = stepsOrder.reduce((acc, key) => {
-    acc[key] = createRenderStep(() => (runNextFrame = true));
-    return acc;
-}, {});
-const sync = stepsOrder.reduce((acc, key) => {
-    const step = steps[key];
-    acc[key] = (process, keepAlive = false, immediate = false) => {
-        if (!runNextFrame)
-            startLoop();
-        return step.schedule(process, keepAlive, immediate);
-    };
-    return acc;
-}, {});
-const cancelSync = stepsOrder.reduce((acc, key) => {
-    acc[key] = steps[key].cancel;
-    return acc;
-}, {});
-const flushSync = stepsOrder.reduce((acc, key) => {
-    acc[key] = () => steps[key].process(frameData);
-    return acc;
-}, {});
-const processStep = (stepId) => steps[stepId].process(frameData);
-const processFrame = (timestamp) => {
-    runNextFrame = false;
-    frameData.delta = useDefaultElapsed
-        ? defaultTimestep
-        : Math.max(Math.min(timestamp - frameData.timestamp, maxElapsed), 1);
-    frameData.timestamp = timestamp;
-    isProcessing = true;
-    stepsOrder.forEach(processStep);
-    isProcessing = false;
-    if (runNextFrame) {
-        useDefaultElapsed = false;
-        onNextFrame(processFrame);
-    }
-};
-const startLoop = () => {
-    runNextFrame = true;
-    useDefaultElapsed = true;
-    if (!isProcessing)
-        onNextFrame(processFrame);
-};
-
-function delay(callback, timeout) {
-    const start = performance.now();
-    const checkElapsed = ({ timestamp }) => {
-        const elapsed = timestamp - start;
-        if (elapsed >= timeout) {
-            cancelSync.read(checkElapsed);
-            callback(elapsed - timeout);
-        }
-    };
-    sync.read(checkElapsed, true);
-    return () => cancelSync.read(checkElapsed);
-}
-
 /*
   Value in range from progress
 
@@ -2844,6 +2674,16 @@ function calcAngularFreq(undampedFreq, dampingRatio) {
     return undampedFreq * Math.sqrt(1 - dampingRatio * dampingRatio);
 }
 
+/*
+  Convert velocity into velocity per second
+
+  @param [number]: Unit per frame
+  @param [number]: Frame duration in ms
+*/
+function velocityPerSecond(velocity, frameDuration) {
+    return frameDuration ? velocity * (1000 / frameDuration) : 0;
+}
+
 const durationKeys = ["duration", "bounce"];
 const physicsKeys = ["stiffness", "damping", "mass"];
 function isSpringType(options, keys) {
@@ -2872,6 +2712,7 @@ function getSpringOptions(options) {
     }
     return springOptions;
 }
+const velocitySampleDuration = 5;
 /**
  * This is based on the spring implementation of Wobble https://github.com/skevy/wobble
  */
@@ -2883,11 +2724,10 @@ function spring({ from = 0.0, to = 1.0, restSpeed = 2, restDelta = 0.01, ...opti
     const state = { done: false, value: from };
     let { stiffness, damping, mass, velocity, duration, isResolvedFromDuration, } = getSpringOptions(options);
     let resolveSpring = zero;
-    let resolveVelocity = zero;
+    let initialVelocity = velocity ? -(velocity / 1000) : 0.0;
+    const dampingRatio = damping / (2 * Math.sqrt(stiffness * mass));
     function createSpring() {
-        const initialVelocity = velocity ? -(velocity / 1000) : 0.0;
         const initialDelta = to - from;
-        const dampingRatio = damping / (2 * Math.sqrt(stiffness * mass));
         const undampedAngularFreq = Math.sqrt(stiffness / mass) / 1000;
         /**
          * If we're working within what looks like a 0-1 range, change the default restDelta
@@ -2909,29 +2749,6 @@ function spring({ from = 0.0, to = 1.0, restSpeed = 2, restDelta = 0.01, ...opti
                             Math.sin(angularFreq * t) +
                             initialDelta * Math.cos(angularFreq * t)));
             };
-            resolveVelocity = (t) => {
-                // TODO Resolve these calculations with the above
-                const envelope = Math.exp(-dampingRatio * undampedAngularFreq * t);
-                return (dampingRatio *
-                    undampedAngularFreq *
-                    envelope *
-                    ((Math.sin(angularFreq * t) *
-                        (initialVelocity +
-                            dampingRatio *
-                                undampedAngularFreq *
-                                initialDelta)) /
-                        angularFreq +
-                        initialDelta * Math.cos(angularFreq * t)) -
-                    envelope *
-                        (Math.cos(angularFreq * t) *
-                            (initialVelocity +
-                                dampingRatio *
-                                    undampedAngularFreq *
-                                    initialDelta) -
-                            angularFreq *
-                                initialDelta *
-                                Math.sin(angularFreq * t)));
-            };
         }
         else if (dampingRatio === 1) {
             // Critically damped spring
@@ -2965,7 +2782,21 @@ function spring({ from = 0.0, to = 1.0, restSpeed = 2, restDelta = 0.01, ...opti
         next: (t) => {
             const current = resolveSpring(t);
             if (!isResolvedFromDuration) {
-                const currentVelocity = resolveVelocity(t) * 1000;
+                let currentVelocity = initialVelocity;
+                if (t !== 0) {
+                    /**
+                     * We only need to calculate velocity for under-damped springs
+                     * as over- and critically-damped springs can't overshoot, so
+                     * checking only for displacement is enough.
+                     */
+                    if (dampingRatio < 1) {
+                        const prevT = Math.max(0, t - velocitySampleDuration);
+                        currentVelocity = velocityPerSecond(current - resolveSpring(prevT), t - prevT);
+                    }
+                    else {
+                        currentVelocity = 0;
+                    }
+                }
                 const isBelowVelocityThreshold = Math.abs(currentVelocity) <= restSpeed;
                 const isBelowDisplacementThreshold = Math.abs(to - current) <= restDelta;
                 state.done =
@@ -2978,7 +2809,7 @@ function spring({ from = 0.0, to = 1.0, restSpeed = 2, restDelta = 0.01, ...opti
             return state;
         },
         flipTarget: () => {
-            velocity = -velocity;
+            initialVelocity = -initialVelocity;
             [from, to] = [to, from];
             createSpring();
         },
@@ -3013,6 +2844,163 @@ function decay({ velocity = 0, from = 0, power = 0.8, timeConstant = 350, restDe
     };
 }
 
+/*
+  Detect and load appropriate clock setting for the execution environment
+ */
+const defaultTimestep = (1 / 60) * 1000;
+const getCurrentTime = typeof performance !== "undefined"
+    ? () => performance.now()
+    : () => Date.now();
+const onNextFrame = typeof window !== "undefined"
+    ? (callback) => window.requestAnimationFrame(callback)
+    : (callback) => setTimeout(() => callback(getCurrentTime()), defaultTimestep);
+
+function createRenderStep(runNextFrame) {
+    /**
+     * We create and reuse two arrays, one to queue jobs for the current frame
+     * and one for the next. We reuse to avoid triggering GC after x frames.
+     */
+    let toRun = [];
+    let toRunNextFrame = [];
+    /**
+     *
+     */
+    let numToRun = 0;
+    /**
+     * Track whether we're currently processing jobs in this step. This way
+     * we can decide whether to schedule new jobs for this frame or next.
+     */
+    let isProcessing = false;
+    let flushNextFrame = false;
+    /**
+     * A set of processes which were marked keepAlive when scheduled.
+     */
+    const toKeepAlive = new WeakSet();
+    const step = {
+        /**
+         * Schedule a process to run on the next frame.
+         */
+        schedule: (callback, keepAlive = false, immediate = false) => {
+            const addToCurrentFrame = immediate && isProcessing;
+            const buffer = addToCurrentFrame ? toRun : toRunNextFrame;
+            if (keepAlive)
+                toKeepAlive.add(callback);
+            // If the buffer doesn't already contain this callback, add it
+            if (buffer.indexOf(callback) === -1) {
+                buffer.push(callback);
+                // If we're adding it to the currently running buffer, update its measured size
+                if (addToCurrentFrame && isProcessing)
+                    numToRun = toRun.length;
+            }
+            return callback;
+        },
+        /**
+         * Cancel the provided callback from running on the next frame.
+         */
+        cancel: (callback) => {
+            const index = toRunNextFrame.indexOf(callback);
+            if (index !== -1)
+                toRunNextFrame.splice(index, 1);
+            toKeepAlive.delete(callback);
+        },
+        /**
+         * Execute all schedule callbacks.
+         */
+        process: (frameData) => {
+            /**
+             * If we're already processing we've probably been triggered by a flushSync
+             * inside an existing process. Instead of executing, mark flushNextFrame
+             * as true and ensure we flush the following frame at the end of this one.
+             */
+            if (isProcessing) {
+                flushNextFrame = true;
+                return;
+            }
+            isProcessing = true;
+            [toRun, toRunNextFrame] = [toRunNextFrame, toRun];
+            // Clear the next frame list
+            toRunNextFrame.length = 0;
+            // Execute this frame
+            numToRun = toRun.length;
+            if (numToRun) {
+                for (let i = 0; i < numToRun; i++) {
+                    const callback = toRun[i];
+                    callback(frameData);
+                    if (toKeepAlive.has(callback)) {
+                        step.schedule(callback);
+                        runNextFrame();
+                    }
+                }
+            }
+            isProcessing = false;
+            if (flushNextFrame) {
+                flushNextFrame = false;
+                step.process(frameData);
+            }
+        },
+    };
+    return step;
+}
+
+const frameData = {
+    delta: 0,
+    timestamp: 0,
+};
+
+const maxElapsed = 40;
+let useDefaultElapsed = true;
+let runNextFrame = false;
+let isProcessing = false;
+const stepsOrder = [
+    "read",
+    "update",
+    "preRender",
+    "render",
+    "postRender",
+];
+const steps = stepsOrder.reduce((acc, key) => {
+    acc[key] = createRenderStep(() => (runNextFrame = true));
+    return acc;
+}, {});
+const sync = stepsOrder.reduce((acc, key) => {
+    const step = steps[key];
+    acc[key] = (process, keepAlive = false, immediate = false) => {
+        if (!runNextFrame)
+            startLoop();
+        return step.schedule(process, keepAlive, immediate);
+    };
+    return acc;
+}, {});
+const cancelSync = stepsOrder.reduce((acc, key) => {
+    acc[key] = steps[key].cancel;
+    return acc;
+}, {});
+const flushSync = stepsOrder.reduce((acc, key) => {
+    acc[key] = () => steps[key].process(frameData);
+    return acc;
+}, {});
+const processStep = (stepId) => steps[stepId].process(frameData);
+const processFrame = (timestamp) => {
+    runNextFrame = false;
+    frameData.delta = useDefaultElapsed
+        ? defaultTimestep
+        : Math.max(Math.min(timestamp - frameData.timestamp, maxElapsed), 1);
+    frameData.timestamp = timestamp;
+    isProcessing = true;
+    stepsOrder.forEach(processStep);
+    isProcessing = false;
+    if (runNextFrame) {
+        useDefaultElapsed = false;
+        onNextFrame(processFrame);
+    }
+};
+const startLoop = () => {
+    runNextFrame = true;
+    useDefaultElapsed = true;
+    if (!isProcessing)
+        onNextFrame(processFrame);
+};
+
 const types = { decay, keyframes, spring };
 function loopElapsed(elapsed, duration, delay = 0) {
     return elapsed - duration - delay;
@@ -3081,7 +3069,7 @@ function animate$1({ from, autoplay = true, driver = framesync, elapsed = 0, rep
                 latest = interpolateFromNumber(latest);
             isComplete = isForwardPlayback ? state.done : elapsed <= 0;
         }
-        onUpdate === null || onUpdate === void 0 ? void 0 : onUpdate(latest);
+        onUpdate && onUpdate(latest);
         if (isComplete) {
             if (repeatCount === 0) {
                 computedDuration =
@@ -3096,29 +3084,19 @@ function animate$1({ from, autoplay = true, driver = framesync, elapsed = 0, rep
         }
     }
     function play() {
-        onPlay === null || onPlay === void 0 ? void 0 : onPlay();
+        onPlay && onPlay();
         driverControls = driver(update);
         driverControls.start();
     }
     autoplay && play();
     return {
         stop: () => {
-            onStop === null || onStop === void 0 ? void 0 : onStop();
+            onStop && onStop();
             driverControls.stop();
         },
     };
 }
 
-/*
-  Convert velocity into velocity per second
-
-  @param [number]: Unit per frame
-  @param [number]: Frame duration in ms
-*/
-function velocityPerSecond(velocity, frameDuration) {
-    return frameDuration ? velocity * (1000 / frameDuration) : 0;
-}
-
 function inertia({ from = 0, velocity = 0, min, max, power = 0.8, timeConstant = 750, bounceStiffness = 500, bounceDamping = 10, restDelta = 1, modifyTarget, driver, onUpdate, onComplete, onStop, }) {
     let currentAnimation;
     function isOutOfBounds(v) {
@@ -3199,6 +3177,22 @@ function inertia({ from = 0, velocity = 0, min, max, power = 0.8, timeConstant =
     };
 }
 
+/**
+ * Timeout defined in ms
+ */
+function delay(callback, timeout) {
+    const start = performance.now();
+    const checkElapsed = ({ timestamp }) => {
+        const elapsed = timestamp - start;
+        if (elapsed >= timeout) {
+            cancelSync.read(checkElapsed);
+            callback(elapsed - timeout);
+        }
+    };
+    sync.read(checkElapsed, true);
+    return () => cancelSync.read(checkElapsed);
+}
+
 /**
  * Decide whether a transition is defined on a given Transition.
  * This filters out orchestration options and returns true
@@ -3285,6 +3279,9 @@ function getPopmotionAnimationOptions(transition, options, key) {
  */
 function getAnimation(key, value, target, transition, onComplete) {
     const valueTransition = getValueTransition(transition, key) || {};
+    const { elapsed = 0 } = transition;
+    valueTransition.elapsed =
+        elapsed - secondsToMilliseconds(transition.delay || 0);
     let origin = valueTransition.from !== undefined ? valueTransition.from : value.get();
     const isTargetAnimatable = isAnimatable(key, target);
     if (origin === "none" && isTargetAnimatable && typeof target === "string") {
@@ -3312,20 +3309,23 @@ function getAnimation(key, value, target, transition, onComplete) {
             onComplete,
             onUpdate: (v) => value.set(v),
         };
-        return valueTransition.type === "inertia" ||
+        const animation = valueTransition.type === "inertia" ||
             valueTransition.type === "decay"
             ? inertia({ ...options, ...valueTransition })
             : animate$1({
                 ...getPopmotionAnimationOptions(valueTransition, options, key),
                 onUpdate: (v) => {
                     options.onUpdate(v);
-                    valueTransition.onUpdate && valueTransition.onUpdate(v);
+                    valueTransition.onUpdate &&
+                        valueTransition.onUpdate(v);
                 },
                 onComplete: () => {
                     options.onComplete();
-                    valueTransition.onComplete && valueTransition.onComplete();
+                    valueTransition.onComplete &&
+                        valueTransition.onComplete();
                 },
             });
+        return () => animation.stop();
     }
     function set() {
         const finalTarget = resolveFinalValueInKeyframes(target);
@@ -3333,13 +3333,16 @@ function getAnimation(key, value, target, transition, onComplete) {
         onComplete();
         valueTransition.onUpdate && valueTransition.onUpdate(finalTarget);
         valueTransition.onComplete && valueTransition.onComplete();
-        return { stop: () => { } };
+        return () => { };
     }
-    return !isOriginAnimatable ||
+    const useInstantAnimation = !isOriginAnimatable ||
         !isTargetAnimatable ||
-        valueTransition.type === false
-        ? set
-        : start;
+        valueTransition.type === false;
+    return useInstantAnimation
+        ? valueTransition.elapsed
+            ? () => delay(set, -valueTransition.elapsed)
+            : set()
+        : start();
 }
 function isZero(value) {
     return (value === 0 ||
@@ -3364,21 +3367,7 @@ function startAnimation(key, value, target, transition = {}) {
         transition = { type: false };
     }
     return value.start((onComplete) => {
-        let controls;
-        const animation = getAnimation(key, value, target, transition, onComplete);
-        const delayBy = getDelayFromTransition(transition, key);
-        const start = () => (controls = animation());
-        let cancelDelay;
-        if (delayBy) {
-            cancelDelay = delay(start, secondsToMilliseconds(delayBy));
-        }
-        else {
-            start();
-        }
-        return () => {
-            cancelDelay && cancelDelay();
-            controls && controls.stop();
-        };
+        return getAnimation(key, value, target, { ...transition, delay: getDelayFromTransition(transition, key) }, onComplete);
     });
 }
 
@@ -3471,7 +3460,7 @@ class MotionValue {
          * This will be replaced by the build step with the latest version number.
          * When MotionValues are provided to motion components, warn if versions are mixed.
          */
-        this.version = "7.7.3";
+        this.version = "7.8.0";
         /**
          * Duration, in milliseconds, since last updating frame.
          *
@@ -3914,6 +3903,40 @@ function isWillChangeMotionValue(value) {
     return Boolean(isMotionValue(value) && value.add);
 }
 
+const appearStoreId = (id, value) => `${id}: ${value}`;
+
+function handoffOptimizedAppearAnimation(id, name) {
+    const { MotionAppearAnimations } = window;
+    const animationId = appearStoreId(id, transformProps.has(name) ? "transform" : name);
+    const animation = MotionAppearAnimations && MotionAppearAnimations.get(animationId);
+    if (animation) {
+        /**
+         * We allow the animation to persist until the next frame:
+         *   1. So it continues to play until Framer Motion is ready to render
+         *      (avoiding a potential flash of the element's original state)
+         *   2. As all independent transforms share a single transform animation, stopping
+         *      it synchronously would prevent subsequent transforms from handing off.
+         */
+        sync.render(() => {
+            /**
+             * Animation.cancel() throws so it needs to be wrapped in a try/catch
+             */
+            try {
+                animation.cancel();
+                MotionAppearAnimations.delete(animationId);
+            }
+            catch (e) { }
+        });
+        return animation.currentTime || 0;
+    }
+    else {
+        return 0;
+    }
+}
+
+const optimizedAppearDataId = "framerAppearId";
+const optimizedAppearDataAttribute = "data-" + camelToDash(optimizedAppearDataId);
+
 function animateVisualElement(visualElement, definition, options = {}) {
     visualElement.notify("AnimationStart", definition);
     let animation;
@@ -3991,7 +4014,7 @@ function animateTarget(visualElement, definition, { delay = 0, transitionOverrid
                 shouldBlockAnimation(animationTypeState, key))) {
             continue;
         }
-        let valueTransition = { delay, ...transition };
+        let valueTransition = { delay, elapsed: 0, ...transition };
         /**
          * Make animation instant if this is a transform prop and we should reduce motion.
          */
@@ -4002,6 +4025,16 @@ function animateTarget(visualElement, definition, { delay = 0, transitionOverrid
                 delay: 0,
             };
         }
+        /**
+         * If this is the first time a value is being animated, check
+         * to see if we're handling off from an existing animation.
+         */
+        if (!value.hasAnimated) {
+            const appearId = visualElement.getProps()[optimizedAppearDataAttribute];
+            if (appearId) {
+                valueTransition.elapsed = handoffOptimizedAppearAnimation(appearId, key);
+            }
+        }
         let animation = startAnimation(key, value, valueTarget, valueTransition);
         if (isWillChangeMotionValue(willChange)) {
             willChange.add(key);
@@ -5753,7 +5786,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "7.7.3", `Attempting to mix Framer Motion versions ${nextValue.version} with 7.7.3 may not work as expected.`);
+                warnOnce(nextValue.version === "7.8.0", `Attempting to mix Framer Motion versions ${nextValue.version} with 7.8.0 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {
@@ -9573,6 +9606,46 @@ function useResetProjection() {
     return reset;
 }
 
+const featureTests = {
+    waapi: () => Object.hasOwnProperty.call(Element.prototype, "animate"),
+};
+const results = {};
+const supports = {};
+/**
+ * Generate features tests that cache their results.
+ */
+for (const key in featureTests) {
+    supports[key] = () => {
+        if (results[key] === undefined)
+            results[key] = featureTests[key]();
+        return results[key];
+    };
+}
+
+const cubicBezierAsString = ([a, b, c, d]) => `cubic-bezier(${a}, ${b}, ${c}, ${d})`;
+
+function animateStyle(element, valueName, keyframes, { delay, duration, ease }) {
+    if (!supports.waapi())
+        return undefined;
+    const animation = element.animate({ [valueName]: keyframes }, {
+        delay,
+        duration,
+        easing: Array.isArray(ease) ? cubicBezierAsString(ease) : ease,
+        fill: "both",
+    });
+    return animation;
+}
+
+function startOptimizedAppearAnimation(element, name, keyframes, options) {
+    window.MotionAppearAnimations || (window.MotionAppearAnimations = new Map());
+    const id = element.dataset[optimizedAppearDataId];
+    const animation = animateStyle(element, name, keyframes, options);
+    if (id && animation) {
+        window.MotionAppearAnimations.set(appearStoreId(id, name), animation);
+    }
+    return animation;
+}
+
 const createObject = () => ({});
 class StateVisualElement extends VisualElement {
     build() { }
@@ -9722,8 +9795,11 @@ exports.makeUseVisualState = makeUseVisualState;
 exports.mix = mix;
 exports.motion = motion;
 exports.motionValue = motionValue;
+exports.optimizedAppearDataAttribute = optimizedAppearDataAttribute;
 exports.pipe = pipe;
 exports.resolveMotionValue = resolveMotionValue;
+exports.spring = spring;
+exports.startOptimizedAppearAnimation = startOptimizedAppearAnimation;
 exports.transform = transform;
 exports.unwrapMotionComponent = unwrapMotionComponent;
 exports.useAnimation = useAnimation;