framer-motion 7.7.3 → 7.8.1

package/dist/es/animation/animate.mjs

@@ -1,6 +1,6 @@
+import { createMotionValueAnimation } from './index.mjs';
 import { motionValue } from '../value/index.mjs';
 import { isMotionValue } from '../value/utils/is-motion-value.mjs';
-import { startAnimation } from './utils/transitions.mjs';
 
 /**
  * Animate a single value or a `MotionValue`.
@@ -31,7 +31,7 @@ import { startAnimation } from './utils/transitions.mjs';
  */
 function animate(from, to, transition = {}) {
     const value = isMotionValue(from) ? from : motionValue(from);
-    startAnimation("", value, to, transition);
+    value.start(createMotionValueAnimation("", value, to, transition));
     return {
         stop: () => value.stop(),
         isAnimating: () => value.isAnimating(),

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

@@ -0,0 +1,8 @@
+/**
+ *
+ */
+function createAcceleratedAnimation() {
+    return () => { };
+}
+
+export { createAcceleratedAnimation };

package/dist/es/animation/create-instant-animation.mjs

@@ -0,0 +1,12 @@
+import { delay } from '../utils/delay.mjs';
+
+function createInstantAnimation({ keyframes, elapsed, onUpdate, onComplete, }) {
+    const setValue = () => {
+        onUpdate && onUpdate(keyframes[keyframes.length - 1]);
+        onComplete && onComplete();
+        return () => { };
+    };
+    return elapsed ? delay(setValue, -elapsed) : setValue();
+}
+
+export { createInstantAnimation };

package/dist/es/animation/{animation-controls.mjs → hooks/animation-controls.mjs}

@@ -1,6 +1,6 @@
 import { invariant } from 'hey-listen';
-import { stopAnimation, animateVisualElement } from '../render/utils/animation.mjs';
-import { setValues } from '../render/utils/setters.mjs';
+import { stopAnimation, animateVisualElement } from '../../render/utils/animation.mjs';
+import { setValues } from '../../render/utils/setters.mjs';
 
 /**
  * @public

package/dist/es/animation/{use-animated-state.mjs → hooks/use-animated-state.mjs}

@@ -1,10 +1,10 @@
 import { useState, useEffect } from 'react';
-import { useConstant } from '../utils/use-constant.mjs';
-import { getOrigin, checkTargetForNewValues } from '../render/utils/setters.mjs';
-import { animateVisualElement } from '../render/utils/animation.mjs';
-import { makeUseVisualState } from '../motion/utils/use-visual-state.mjs';
-import { createBox } from '../projection/geometry/models.mjs';
-import { VisualElement } from '../render/VisualElement.mjs';
+import { useConstant } from '../../utils/use-constant.mjs';
+import { getOrigin, checkTargetForNewValues } from '../../render/utils/setters.mjs';
+import { animateVisualElement } from '../../render/utils/animation.mjs';
+import { makeUseVisualState } from '../../motion/utils/use-visual-state.mjs';
+import { createBox } from '../../projection/geometry/models.mjs';
+import { VisualElement } from '../../render/VisualElement.mjs';
 
 const createObject = () => ({});
 class StateVisualElement extends VisualElement {

package/dist/es/animation/{use-animation.mjs → hooks/use-animation.mjs}

@@ -1,6 +1,6 @@
 import { animationControls } from './animation-controls.mjs';
 import { useEffect } from 'react';
-import { useConstant } from '../utils/use-constant.mjs';
+import { useConstant } from '../../utils/use-constant.mjs';
 
 /**
  * Creates `AnimationControls`, which can be used to manually start, stop

package/dist/es/animation/index.mjs

@@ -0,0 +1,121 @@
+import { warning } from 'hey-listen';
+import { secondsToMilliseconds } from '../utils/time-conversion.mjs';
+import { instantAnimationState } from '../utils/use-instant-transition-state.mjs';
+import { createAcceleratedAnimation } from './create-accelerated-animation.mjs';
+import { createInstantAnimation } from './create-instant-animation.mjs';
+import { animate } from './legacy-popmotion/index.mjs';
+import { inertia } from './legacy-popmotion/inertia.mjs';
+import { getDefaultTransition } from './utils/default-transitions.mjs';
+import { isAnimatable } from './utils/is-animatable.mjs';
+import { getKeyframes } from './utils/keyframes.mjs';
+import { getValueTransition, isTransitionDefined } from './utils/transitions.mjs';
+import { supports } from './waapi/supports.mjs';
+
+/**
+ * A list of values that can be hardware-accelerated.
+ */
+const acceleratedValues = new Set([]);
+const createMotionValueAnimation = (valueName, value, target, transition = {}) => {
+    return (onComplete) => {
+        const valueTransition = getValueTransition(transition, valueName) || {};
+        /**
+         * Most transition values are currently completely overwritten by value-specific
+         * transitions. In the future it'd be nicer to blend these transitions. But for now
+         * delay actually does inherit from the root transition if not value-specific.
+         */
+        const delay = valueTransition.delay || transition.delay || 0;
+        /**
+         * Elapsed isn't a public transition option but can be passed through from
+         * optimized appear effects in milliseconds.
+         */
+        let { elapsed = 0 } = transition;
+        elapsed = elapsed - secondsToMilliseconds(delay);
+        const keyframes = getKeyframes(value, valueName, target, valueTransition);
+        /**
+         * Check if we're able to animate between the start and end keyframes,
+         * and throw a warning if we're attempting to animate between one that's
+         * animatable and another that isn't.
+         */
+        const originKeyframe = keyframes[0];
+        const targetKeyframe = keyframes[keyframes.length - 1];
+        const isOriginAnimatable = isAnimatable(valueName, originKeyframe);
+        const isTargetAnimatable = isAnimatable(valueName, targetKeyframe);
+        warning(isOriginAnimatable === isTargetAnimatable, `You are trying to animate ${valueName} from "${originKeyframe}" to "${targetKeyframe}". ${originKeyframe} is not an animatable value - to enable this animation set ${originKeyframe} to a value animatable to ${targetKeyframe} via the \`style\` property.`);
+        let options = {
+            keyframes,
+            velocity: value.getVelocity(),
+            ...valueTransition,
+            elapsed,
+            onUpdate: (v) => {
+                value.set(v);
+                valueTransition.onUpdate && valueTransition.onUpdate(v);
+            },
+            onComplete: () => {
+                onComplete();
+                valueTransition.onComplete && valueTransition.onComplete();
+            },
+        };
+        if (!isOriginAnimatable ||
+            !isTargetAnimatable ||
+            instantAnimationState.current ||
+            valueTransition.type === false) {
+            /**
+             * If we can't animate this value, or the global instant animation flag is set,
+             * or this is simply defined as an instant transition, return an instant transition.
+             */
+            return createInstantAnimation(options);
+        }
+        else if (valueTransition.type === "inertia") {
+            /**
+             * If this is an inertia animation, we currently don't support pre-generating
+             * keyframes for this as such it must always run on the main thread.
+             */
+            const animation = inertia(options);
+            return () => animation.stop();
+        }
+        /**
+         * If there's no transition defined for this value, we can generate
+         * unqiue transition settings for this value.
+         */
+        if (!isTransitionDefined(valueTransition)) {
+            options = {
+                ...options,
+                ...getDefaultTransition(valueName, options),
+            };
+        }
+        /**
+         * Both WAAPI and our internal animation functions use durations
+         * as defined by milliseconds, while our external API defines them
+         * as seconds.
+         */
+        if (options.duration) {
+            options.duration = secondsToMilliseconds(options.duration);
+        }
+        if (options.repeatDelay) {
+            options.repeatDelay = secondsToMilliseconds(options.repeatDelay);
+        }
+        const canAccelerateAnimation = acceleratedValues.has(valueName) &&
+            supports.waapi() &&
+            value.owner &&
+            !value.owner.getProps().onUpdate &&
+            !options.repeat;
+        if (canAccelerateAnimation) {
+            /**
+             * If this animation is capable of being run via WAAPI, then do so.
+             *
+             * TODO: Currently no values are hardware accelerated so this clause
+             * will never trigger. Animation to be added in subsequent PR.
+             */
+            return createAcceleratedAnimation();
+        }
+        else {
+            /**
+             * Otherwise, fall back to the main thread.
+             */
+            const animation = animate(options);
+            return () => animation.stop();
+        }
+    };
+};
+
+export { createMotionValueAnimation };

package/dist/es/animation/legacy-popmotion/decay.mjs

@@ -1,18 +1,25 @@
-function decay({ velocity = 0, from = 0, power = 0.8, timeConstant = 350, restDelta = 0.5, modifyTarget, }) {
+function decay({ 
+/**
+ * The decay animation dynamically calculates an end of the animation
+ * based on the initial keyframe, so we only need to define a single keyframe
+ * as default.
+ */
+keyframes = [0], velocity = 0, power = 0.8, timeConstant = 350, restDelta = 0.5, modifyTarget, }) {
+    const origin = keyframes[0];
     /**
      * This is the Iterator-spec return value. We ensure it's mutable rather than using a generator
      * to reduce GC during animation.
      */
-    const state = { done: false, value: from };
+    const state = { done: false, value: origin };
     let amplitude = power * velocity;
-    const ideal = from + amplitude;
+    const ideal = origin + amplitude;
     const target = modifyTarget === undefined ? ideal : modifyTarget(ideal);
     /**
      * If the target has changed we need to re-calculate the amplitude, otherwise
      * the animation will start from the wrong position.
      */
     if (target !== ideal)
-        amplitude = target - from;
+        amplitude = target - origin;
     return {
         next: (t) => {
             const delta = -amplitude * Math.exp(-t / timeConstant);

package/dist/es/animation/legacy-popmotion/index.mjs

@@ -4,7 +4,12 @@ import { decay } from './decay.mjs';
 import { sync, cancelSync } from '../../frameloop/index.mjs';
 import { interpolate } from '../../utils/interpolate.mjs';
 
-const types = { decay, keyframes, spring };
+const types = {
+    decay,
+    keyframes: keyframes,
+    tween: keyframes,
+    spring,
+};
 function loopElapsed(elapsed, duration, delay = 0) {
     return elapsed - duration - delay;
 }
@@ -23,26 +28,29 @@ const framesync = (update) => {
         stop: () => cancelSync.update(passTimestamp),
     };
 };
-function animate({ from, autoplay = true, driver = framesync, elapsed = 0, repeat: repeatMax = 0, repeatType = "loop", repeatDelay = 0, onPlay, onStop, onComplete, onRepeat, onUpdate, type = "keyframes", ...options }) {
+function animate({ duration, driver = framesync, elapsed = 0, repeat: repeatMax = 0, repeatType = "loop", repeatDelay = 0, keyframes, onPlay, onStop, onComplete, onRepeat, onUpdate, type = "keyframes", ...options }) {
     var _a, _b;
-    let { to } = options;
     let driverControls;
     let repeatCount = 0;
-    let computedDuration = options
-        .duration;
+    let computedDuration = duration;
     let latest;
     let isComplete = false;
     let isForwardPlayback = true;
     let interpolateFromNumber;
-    const animator = types[Array.isArray(to) ? "keyframes" : type];
-    if ((_b = (_a = animator).needsInterpolation) === null || _b === void 0 ? void 0 : _b.call(_a, from, to)) {
-        interpolateFromNumber = interpolate([0, 100], [from, to], {
+    const animator = types[keyframes.length > 2 ? "keyframes" : type];
+    const origin = keyframes[0];
+    const target = keyframes[keyframes.length - 1];
+    if ((_b = (_a = animator).needsInterpolation) === null || _b === void 0 ? void 0 : _b.call(_a, origin, target)) {
+        interpolateFromNumber = interpolate([0, 100], [origin, target], {
             clamp: false,
         });
-        from = 0;
-        to = 100;
+        keyframes = [0, 100];
     }
-    const animation = animator({ ...options, from, to });
+    const animation = animator({
+        ...options,
+        duration,
+        keyframes,
+    });
     function repeat() {
         repeatCount++;
         if (repeatType === "reverse") {
@@ -72,7 +80,7 @@ function animate({ from, autoplay = true, driver = framesync, elapsed = 0, repea
                 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 =
@@ -87,14 +95,14 @@ function animate({ from, autoplay = true, driver = framesync, elapsed = 0, repea
         }
     }
     function play() {
-        onPlay === null || onPlay === void 0 ? void 0 : onPlay();
+        onPlay && onPlay();
         driverControls = driver(update);
         driverControls.start();
     }
-    autoplay && play();
+    play();
     return {
         stop: () => {
-            onStop === null || onStop === void 0 ? void 0 : onStop();
+            onStop && onStop();
             driverControls.stop();
         },
     };

package/dist/es/animation/legacy-popmotion/inertia.mjs

@@ -2,12 +2,13 @@ import { animate } from './index.mjs';
 import { velocityPerSecond } from '../../utils/velocity-per-second.mjs';
 import { frameData } from '../../frameloop/data.mjs';
 
-function inertia({ from = 0, velocity = 0, min, max, power = 0.8, timeConstant = 750, bounceStiffness = 500, bounceDamping = 10, restDelta = 1, modifyTarget, driver, onUpdate, onComplete, onStop, }) {
+function inertia({ keyframes, velocity = 0, min, max, power = 0.8, timeConstant = 750, bounceStiffness = 500, bounceDamping = 10, restDelta = 1, modifyTarget, driver, onUpdate, onComplete, onStop, }) {
+    const origin = keyframes[0];
     let currentAnimation;
     function isOutOfBounds(v) {
         return (min !== undefined && v < min) || (max !== undefined && v > max);
     }
-    function boundaryNearest(v) {
+    function findNearestBoundary(v) {
         if (min === undefined)
             return max;
         if (max === undefined)
@@ -17,6 +18,8 @@ function inertia({ from = 0, velocity = 0, min, max, power = 0.8, timeConstant =
     function startAnimation(options) {
         currentAnimation === null || currentAnimation === void 0 ? void 0 : currentAnimation.stop();
         currentAnimation = animate({
+            keyframes: [0, 1],
+            velocity: 0,
             ...options,
             driver,
             onUpdate: (v) => {
@@ -37,9 +40,12 @@ function inertia({ from = 0, velocity = 0, min, max, power = 0.8, timeConstant =
             ...options,
         });
     }
-    if (isOutOfBounds(from)) {
+    if (isOutOfBounds(origin)) {
         // Start the animation with spring if outside the defined boundaries
-        startSpring({ from, velocity, to: boundaryNearest(from) });
+        startSpring({
+            velocity,
+            keyframes: [origin, findNearestBoundary(origin)],
+        });
     }
     else {
         /**
@@ -50,10 +56,10 @@ function inertia({ from = 0, velocity = 0, min, max, power = 0.8, timeConstant =
          * If it is, we want to check per frame when to switch to a spring
          * animation
          */
-        let target = power * velocity + from;
+        let target = power * velocity + origin;
         if (typeof modifyTarget !== "undefined")
             target = modifyTarget(target);
-        const boundary = boundaryNearest(target);
+        const boundary = findNearestBoundary(target);
         const heading = boundary === min ? -1 : 1;
         let prev;
         let current;
@@ -63,12 +69,12 @@ function inertia({ from = 0, velocity = 0, min, max, power = 0.8, timeConstant =
             velocity = velocityPerSecond(v - prev, frameData.delta);
             if ((heading === 1 && v > boundary) ||
                 (heading === -1 && v < boundary)) {
-                startSpring({ from: v, to: boundary, velocity });
+                startSpring({ keyframes: [v, boundary], velocity });
             }
         };
         startAnimation({
             type: "decay",
-            from,
+            keyframes: [origin, 0],
             velocity,
             timeConstant,
             power,

package/dist/es/animation/legacy-popmotion/keyframes.mjs

@@ -1,5 +1,6 @@
 import { easeInOut } from '../../easing/ease.mjs';
 import { interpolate } from '../../utils/interpolate.mjs';
+import { isEasingArray, easingDefinitionToFunction } from '../utils/easing.mjs';
 
 function defaultEasing(values, easing) {
     return values.map(() => easing || easeInOut).splice(0, values.length - 1);
@@ -11,28 +12,35 @@ function defaultOffset(values) {
 function convertOffsetToTimes(offset, duration) {
     return offset.map((o) => o * duration);
 }
-function keyframes({ from = 0, to = 1, ease, offset, duration = 300, }) {
+function keyframes({ keyframes: keyframeValues, ease = easeInOut, times, duration = 300, }) {
+    keyframeValues = [...keyframeValues];
+    const origin = keyframes[0];
     /**
-     * This is the Iterator-spec return value. We ensure it's mutable rather than using a generator
-     * to reduce GC during animation.
+     * Easing functions can be externally defined as strings. Here we convert them
+     * into actual functions.
      */
-    const state = { done: false, value: from };
+    const easingFunctions = isEasingArray(ease)
+        ? ease.map(easingDefinitionToFunction)
+        : easingDefinitionToFunction(ease);
     /**
-     * Convert values to an array if they've been given as from/to options
+     * This is the Iterator-spec return value. We ensure it's mutable rather than using a generator
+     * to reduce GC during animation.
      */
-    const values = Array.isArray(to) ? to : [from, to];
+    const state = { done: false, value: origin };
     /**
      * Create a times array based on the provided 0-1 offsets
      */
-    const times = convertOffsetToTimes(
+    const absoluteTimes = convertOffsetToTimes(
     // Only use the provided offsets if they're the correct length
     // TODO Maybe we should warn here if there's a length mismatch
-    offset && offset.length === values.length
-        ? offset
-        : defaultOffset(values), duration);
+    times && times.length === keyframes.length
+        ? times
+        : defaultOffset(keyframeValues), duration);
     function createInterpolator() {
-        return interpolate(times, values, {
-            ease: Array.isArray(ease) ? ease : defaultEasing(values, ease),
+        return interpolate(absoluteTimes, keyframeValues, {
+            ease: Array.isArray(easingFunctions)
+                ? easingFunctions
+                : defaultEasing(keyframeValues, easingFunctions),
         });
     }
     let interpolator = createInterpolator();
@@ -43,7 +51,7 @@ function keyframes({ from = 0, to = 1, ease, offset, duration = 300, }) {
             return state;
         },
         flipTarget: () => {
-            values.reverse();
+            keyframeValues.reverse();
             interpolator = createInterpolator();
         },
     };

package/dist/es/animation/legacy-popmotion/spring.mjs

@@ -1,4 +1,5 @@
 import { findSpring, calcAngularFreq } from './find-spring.mjs';
+import { velocityPerSecond } from '../../utils/velocity-per-second.mjs';
 
 const durationKeys = ["duration", "bounce"];
 const physicsKeys = ["stiffness", "damping", "mass"];
@@ -28,36 +29,38 @@ function getSpringOptions(options) {
     }
     return springOptions;
 }
+const velocitySampleDuration = 5;
 /**
  * This is based on the spring implementation of Wobble https://github.com/skevy/wobble
  */
-function spring({ from = 0.0, to = 1.0, restSpeed = 2, restDelta = 0.01, ...options }) {
+function spring({ keyframes, restSpeed = 2, restDelta = 0.01, ...options }) {
+    let origin = keyframes[0];
+    let target = keyframes[keyframes.length - 1];
     /**
      * This is the Iterator-spec return value. We ensure it's mutable rather than using a generator
      * to reduce GC during animation.
      */
-    const state = { done: false, value: from };
-    let { stiffness, damping, mass, velocity, duration, isResolvedFromDuration, } = getSpringOptions(options);
+    const state = { done: false, value: origin };
+    const { 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 initialDelta = target - origin;
         const undampedAngularFreq = Math.sqrt(stiffness / mass) / 1000;
         /**
          * If we're working within what looks like a 0-1 range, change the default restDelta
          * to 0.01
          */
         if (restDelta === undefined) {
-            restDelta = Math.min(Math.abs(to - from) / 100, 0.4);
+            restDelta = Math.min(Math.abs(target - origin) / 100, 0.4);
         }
         if (dampingRatio < 1) {
             const angularFreq = calcAngularFreq(undampedAngularFreq, dampingRatio);
             // Underdamped spring
             resolveSpring = (t) => {
                 const envelope = Math.exp(-dampingRatio * undampedAngularFreq * t);
-                return (to -
+                return (target -
                     envelope *
                         (((initialVelocity +
                             dampingRatio * undampedAngularFreq * initialDelta) /
@@ -65,33 +68,10 @@ 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
-            resolveSpring = (t) => to -
+            resolveSpring = (t) => target -
                 Math.exp(-undampedAngularFreq * t) *
                     (initialDelta +
                         (initialVelocity + undampedAngularFreq * initialDelta) *
@@ -104,7 +84,7 @@ function spring({ from = 0.0, to = 1.0, restSpeed = 2, restDelta = 0.01, ...opti
                 const envelope = Math.exp(-dampingRatio * undampedAngularFreq * t);
                 // When performing sinh or cosh values can hit Infinity so we cap them here
                 const freqForT = Math.min(dampedAngularFreq * t, 300);
-                return (to -
+                return (target -
                     (envelope *
                         ((initialVelocity +
                             dampingRatio * undampedAngularFreq * initialDelta) *
@@ -121,21 +101,35 @@ 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;
+                const isBelowDisplacementThreshold = Math.abs(target - current) <= restDelta;
                 state.done =
                     isBelowVelocityThreshold && isBelowDisplacementThreshold;
             }
             else {
                 state.done = t >= duration;
             }
-            state.value = state.done ? to : current;
+            state.value = state.done ? target : current;
             return state;
         },
         flipTarget: () => {
-            velocity = -velocity;
-            [from, to] = [to, from];
+            initialVelocity = -initialVelocity;
+            [origin, target] = [target, origin];
             createSpring();
         },
     };

package/dist/es/animation/optimized-appear/data-id.mjs

@@ -0,0 +1,6 @@
+import { camelToDash } from '../../render/dom/utils/camel-to-dash.mjs';
+
+const optimizedAppearDataId = "framerAppearId";
+const optimizedAppearDataAttribute = "data-" + camelToDash(optimizedAppearDataId);
+
+export { optimizedAppearDataAttribute, optimizedAppearDataId };

package/dist/es/animation/optimized-appear/handoff.mjs

@@ -0,0 +1,34 @@
+import { sync } from '../../frameloop/index.mjs';
+import { transformProps } from '../../render/html/utils/transform.mjs';
+import { appearStoreId } from './store-id.mjs';
+
+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;
+    }
+}
+
+export { handoffOptimizedAppearAnimation };

package/dist/es/animation/optimized-appear/start.mjs

@@ -0,0 +1,15 @@
+import { appearStoreId } from './store-id.mjs';
+import { animateStyle } from '../waapi/index.mjs';
+import { optimizedAppearDataId } from './data-id.mjs';
+
+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;
+}
+
+export { startOptimizedAppearAnimation };

package/dist/es/animation/optimized-appear/store-id.mjs

@@ -0,0 +1,3 @@
+const appearStoreId = (id, value) => `${id}: ${value}`;
+
+export { appearStoreId };