framer-motion 7.7.3 → 7.8.0

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

@@ -72,7 +72,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 +87,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();
     return {
         stop: () => {
-            onStop === null || onStop === void 0 ? void 0 : onStop();
+            onStop && onStop();
             driverControls.stop();
         },
     };

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,6 +29,7 @@ function getSpringOptions(options) {
     }
     return springOptions;
 }
+const velocitySampleDuration = 5;
 /**
  * This is based on the spring implementation of Wobble https://github.com/skevy/wobble
  */
@@ -39,11 +41,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
@@ -65,29 +66,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
@@ -121,7 +99,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 =
@@ -134,7 +126,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();
         },

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 };

package/dist/es/animation/utils/transitions.mjs

@@ -6,9 +6,9 @@ import { warning } from 'hey-listen';
 import { getAnimatableNone } from '../../render/dom/value-types/animatable-none.mjs';
 import { instantAnimationState } from '../../utils/use-instant-transition-state.mjs';
 import { resolveFinalValueInKeyframes } from '../../utils/resolve-value.mjs';
-import { delay } from '../../utils/delay.mjs';
 import { inertia } from '../legacy-popmotion/inertia.mjs';
 import { animate } from '../legacy-popmotion/index.mjs';
+import { delay } from '../../utils/delay.mjs';
 
 /**
  * Decide whether a transition is defined on a given Transition.
@@ -96,6 +96,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") {
@@ -123,20 +126,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({
                 ...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);
@@ -144,13 +150,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 ||
@@ -175,21 +184,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);
     });
 }
 

package/dist/es/animation/waapi/easing.mjs

@@ -0,0 +1,3 @@
+const cubicBezierAsString = ([a, b, c, d]) => `cubic-bezier(${a}, ${b}, ${c}, ${d})`;
+
+export { cubicBezierAsString };

package/dist/es/animation/waapi/index.mjs

@@ -0,0 +1,16 @@
+import { supports } from './supports.mjs';
+import { cubicBezierAsString } from './easing.mjs';
+
+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;
+}
+
+export { animateStyle };

package/dist/es/animation/waapi/supports.mjs

@@ -0,0 +1,17 @@
+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];
+    };
+}
+
+export { supports };

package/dist/es/index.mjs

@@ -49,6 +49,9 @@ export { distance, distance2D } from './utils/distance.mjs';
 export { mix } from './utils/mix.mjs';
 export { pipe } from './utils/pipe.mjs';
 export { wrap } from './utils/wrap.mjs';
+export { startOptimizedAppearAnimation } from './animation/optimized-appear/start.mjs';
+export { optimizedAppearDataAttribute } from './animation/optimized-appear/data-id.mjs';
+export { spring } from './animation/legacy-popmotion/spring.mjs';
 export { MotionContext, useVisualElementContext } from './context/MotionContext/index.mjs';
 export { MotionConfigContext } from './context/MotionConfigContext.mjs';
 export { PresenceContext } from './context/PresenceContext.mjs';

package/dist/es/render/utils/animation.mjs

@@ -3,6 +3,8 @@ import { setTarget } from './setters.mjs';
 import { resolveVariant } from './resolve-dynamic-variants.mjs';
 import { transformProps } from '../html/utils/transform.mjs';
 import { isWillChangeMotionValue } from '../../value/use-will-change/is.mjs';
+import { handoffOptimizedAppearAnimation } from '../../animation/optimized-appear/handoff.mjs';
+import { optimizedAppearDataAttribute } from '../../animation/optimized-appear/data-id.mjs';
 
 function animateVisualElement(visualElement, definition, options = {}) {
     visualElement.notify("AnimationStart", definition);
@@ -81,7 +83,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.
          */
@@ -92,6 +94,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);

package/dist/es/render/utils/motion-values.mjs

@@ -22,7 +22,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "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)) {

package/dist/es/utils/delay.mjs

@@ -1,5 +1,8 @@
 import { sync, cancelSync } from '../frameloop/index.mjs';
 
+/**
+ * Timeout defined in ms
+ */
 function delay(callback, timeout) {
     const start = performance.now();
     const checkElapsed = ({ timestamp }) => {

package/dist/es/value/index.mjs

@@ -25,7 +25,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.
          *