framer-motion 7.7.3 → 7.8.1

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

@@ -1,15 +1,13 @@
-import { isKeyframesTarget } from './is-keyframes-target.mjs';
-
 const underDampedSpring = () => ({
     type: "spring",
     stiffness: 500,
     damping: 25,
     restSpeed: 10,
 });
-const criticallyDampedSpring = (to) => ({
+const criticallyDampedSpring = (target) => ({
     type: "spring",
     stiffness: 550,
-    damping: to === 0 ? 2 * Math.sqrt(550) : 30,
+    damping: target === 0 ? 2 * Math.sqrt(550) : 30,
     restSpeed: 10,
 });
 const linearTween = () => ({
@@ -17,11 +15,10 @@ const linearTween = () => ({
     ease: "linear",
     duration: 0.3,
 });
-const keyframes = (values) => ({
+const keyframesTransition = {
     type: "keyframes",
     duration: 0.8,
-    values,
-});
+};
 const defaultTransitions = {
     x: underDampedSpring,
     y: underDampedSpring,
@@ -38,16 +35,14 @@ const defaultTransitions = {
     color: linearTween,
     default: criticallyDampedSpring,
 };
-const getDefaultTransition = (valueKey, to) => {
-    let transitionFactory;
-    if (isKeyframesTarget(to)) {
-        transitionFactory = keyframes;
+const getDefaultTransition = (valueKey, { keyframes }) => {
+    if (keyframes.length > 2) {
+        return keyframesTransition;
     }
     else {
-        transitionFactory =
-            defaultTransitions[valueKey] || defaultTransitions.default;
+        const factory = defaultTransitions[valueKey] || defaultTransitions.default;
+        return factory(keyframes[1]);
     }
-    return { to, ...transitionFactory(to) };
 };
 
 export { criticallyDampedSpring, getDefaultTransition, linearTween, underDampedSpring };

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

@@ -0,0 +1,41 @@
+import { getAnimatableNone } from '../../render/dom/value-types/animatable-none.mjs';
+import { isAnimatable } from './is-animatable.mjs';
+import { isZero, getZeroUnit } from './transitions.mjs';
+
+function getKeyframes(value, valueName, target, transition) {
+    const isTargetAnimatable = isAnimatable(valueName, target);
+    let origin = transition.from !== undefined ? transition.from : value.get();
+    if (origin === "none" && isTargetAnimatable && typeof target === "string") {
+        /**
+         * If we're trying to animate from "none", try and get an animatable version
+         * of the target. This could be improved to work both ways.
+         */
+        origin = getAnimatableNone(valueName, target);
+    }
+    else if (isZero(origin) && typeof target === "string") {
+        origin = getZeroUnit(target);
+    }
+    else if (!Array.isArray(target) &&
+        isZero(target) &&
+        typeof origin === "string") {
+        target = getZeroUnit(origin);
+    }
+    /**
+     * If the target has been defined as a series of keyframes
+     */
+    if (Array.isArray(target)) {
+        /**
+         * Ensure an initial wildcard keyframe is hydrated by the origin.
+         * TODO: Support extra wildcard keyframes i.e [1, null, 0]
+         */
+        if (target[0] === null) {
+            target[0] = origin;
+        }
+        return target;
+    }
+    else {
+        return [origin, target];
+    }
+}
+
+export { getKeyframes };

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

@@ -1,14 +1,4 @@
-import { secondsToMilliseconds } from '../../utils/time-conversion.mjs';
-import { isEasingArray, easingDefinitionToFunction } from './easing.mjs';
-import { isAnimatable } from './is-animatable.mjs';
-import { getDefaultTransition } from './default-transitions.mjs';
-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';
 
 /**
  * Decide whether a transition is defined on a given Transition.
@@ -18,140 +8,6 @@ import { animate } from '../legacy-popmotion/index.mjs';
 function isTransitionDefined({ when, delay: _delay, delayChildren, staggerChildren, staggerDirection, repeat, repeatType, repeatDelay, from, ...transition }) {
     return !!Object.keys(transition).length;
 }
-/**
- * Convert Framer Motion's Transition type into Popmotion-compatible options.
- */
-function convertTransitionToAnimationOptions({ ease, times, ...transition }) {
-    const options = { ...transition };
-    if (times)
-        options["offset"] = times;
-    /**
-     * Convert any existing durations from seconds to milliseconds
-     */
-    if (transition.duration)
-        options["duration"] = secondsToMilliseconds(transition.duration);
-    if (transition.repeatDelay)
-        options.repeatDelay = secondsToMilliseconds(transition.repeatDelay);
-    /**
-     * Map easing names to Popmotion's easing functions
-     */
-    if (ease) {
-        options["ease"] = isEasingArray(ease)
-            ? ease.map(easingDefinitionToFunction)
-            : easingDefinitionToFunction(ease);
-    }
-    /**
-     * Support legacy transition API
-     */
-    if (transition.type === "tween")
-        options.type = "keyframes";
-    /**
-     * TODO: Popmotion 9 has the ability to automatically detect whether to use
-     * a keyframes or spring animation, but does so by detecting velocity and other spring options.
-     * It'd be good to introduce a similar thing here.
-     */
-    if (transition.type !== "spring")
-        options.type = "keyframes";
-    return options;
-}
-/**
- * Get the delay for a value by checking Transition with decreasing specificity.
- */
-function getDelayFromTransition(transition, key) {
-    const valueTransition = getValueTransition(transition, key) || {};
-    return valueTransition.delay !== undefined
-        ? valueTransition.delay
-        : transition.delay !== undefined
-            ? transition.delay
-            : 0;
-}
-function hydrateKeyframes(options) {
-    if (Array.isArray(options.to) && options.to[0] === null) {
-        options.to = [...options.to];
-        options.to[0] = options.from;
-    }
-    return options;
-}
-function getPopmotionAnimationOptions(transition, options, key) {
-    if (Array.isArray(options.to) && transition.duration === undefined) {
-        transition.duration = 0.8;
-    }
-    hydrateKeyframes(options);
-    /**
-     * Get a default transition if none is determined to be defined.
-     */
-    if (!isTransitionDefined(transition)) {
-        transition = {
-            ...transition,
-            ...getDefaultTransition(key, options.to),
-        };
-    }
-    return {
-        ...options,
-        ...convertTransitionToAnimationOptions(transition),
-    };
-}
-/**
- *
- */
-function getAnimation(key, value, target, transition, onComplete) {
-    const valueTransition = getValueTransition(transition, key) || {};
-    let origin = valueTransition.from !== undefined ? valueTransition.from : value.get();
-    const isTargetAnimatable = isAnimatable(key, target);
-    if (origin === "none" && isTargetAnimatable && typeof target === "string") {
-        /**
-         * If we're trying to animate from "none", try and get an animatable version
-         * of the target. This could be improved to work both ways.
-         */
-        origin = getAnimatableNone(key, target);
-    }
-    else if (isZero(origin) && typeof target === "string") {
-        origin = getZeroUnit(target);
-    }
-    else if (!Array.isArray(target) &&
-        isZero(target) &&
-        typeof origin === "string") {
-        target = getZeroUnit(origin);
-    }
-    const isOriginAnimatable = isAnimatable(key, origin);
-    warning(isOriginAnimatable === isTargetAnimatable, `You are trying to animate ${key} from "${origin}" to "${target}". ${origin} is not an animatable value - to enable this animation set ${origin} to a value animatable to ${target} via the \`style\` property.`);
-    function start() {
-        const options = {
-            from: origin,
-            to: target,
-            velocity: value.getVelocity(),
-            onComplete,
-            onUpdate: (v) => value.set(v),
-        };
-        return valueTransition.type === "inertia" ||
-            valueTransition.type === "decay"
-            ? inertia({ ...options, ...valueTransition })
-            : animate({
-                ...getPopmotionAnimationOptions(valueTransition, options, key),
-                onUpdate: (v) => {
-                    options.onUpdate(v);
-                    valueTransition.onUpdate && valueTransition.onUpdate(v);
-                },
-                onComplete: () => {
-                    options.onComplete();
-                    valueTransition.onComplete && valueTransition.onComplete();
-                },
-            });
-    }
-    function set() {
-        const finalTarget = resolveFinalValueInKeyframes(target);
-        value.set(finalTarget);
-        onComplete();
-        valueTransition.onUpdate && valueTransition.onUpdate(finalTarget);
-        valueTransition.onComplete && valueTransition.onComplete();
-        return { stop: () => { } };
-    }
-    return !isOriginAnimatable ||
-        !isTargetAnimatable ||
-        valueTransition.type === false
-        ? set
-        : start;
-}
 function isZero(value) {
     return (value === 0 ||
         (typeof value === "string" &&
@@ -166,31 +22,5 @@ function getZeroUnit(potentialUnitType) {
 function getValueTransition(transition, key) {
     return transition[key] || transition["default"] || transition;
 }
-/**
- * Start animation on a MotionValue. This function is an interface between
- * Framer Motion and Popmotion
- */
-function startAnimation(key, value, target, transition = {}) {
-    if (instantAnimationState.current) {
-        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();
-        };
-    });
-}
 
-export { convertTransitionToAnimationOptions, getDelayFromTransition, getPopmotionAnimationOptions, getValueTransition, getZeroUnit, hydrateKeyframes, isTransitionDefined, isZero, startAnimation };
+export { getValueTransition, getZeroUnit, isTransitionDefined, isZero };

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

@@ -9,12 +9,12 @@ import { createBox } from '../../projection/geometry/models.mjs';
 import { eachAxis } from '../../projection/utils/each-axis.mjs';
 import { measurePageBox } from '../../projection/utils/measure.mjs';
 import { extractEventInfo } from '../../events/event-info.mjs';
-import { startAnimation } from '../../animation/utils/transitions.mjs';
 import { convertBoxToBoundingBox, convertBoundingBoxToBox } from '../../projection/geometry/conversion.mjs';
 import { addDomEvent } from '../../events/use-dom-event.mjs';
 import { calcLength } from '../../projection/geometry/delta-calc.mjs';
 import { mix } from '../../utils/mix.mjs';
 import { percent } from '../../value/types/numbers/units.mjs';
+import { createMotionValueAnimation } from '../../animation/index.mjs';
 
 const elementDragControls = new WeakMap();
 /**
@@ -271,7 +271,7 @@ class VisualElementDragControls {
     }
     startAxisValueAnimation(axis, transition) {
         const axisValue = this.getAxisMotionValue(axis);
-        return startAnimation(axis, axisValue, 0, transition);
+        return axisValue.start(createMotionValueAnimation(axis, axisValue, 0, transition));
     }
     stopAnimation() {
         eachAxis((axis) => this.getAxisMotionValue(axis).stop());

package/dist/es/index.mjs

@@ -22,8 +22,8 @@ export { useTime } from './value/use-time.mjs';
 export { useWillChange } from './value/use-will-change/index.mjs';
 export { useReducedMotion } from './utils/reduced-motion/use-reduced-motion.mjs';
 export { useReducedMotionConfig } from './utils/reduced-motion/use-reduced-motion-config.mjs';
-export { animationControls } from './animation/animation-controls.mjs';
-export { useAnimation, useAnimationControls } from './animation/use-animation.mjs';
+export { animationControls } from './animation/hooks/animation-controls.mjs';
+export { useAnimation, useAnimationControls } from './animation/hooks/use-animation.mjs';
 export { useAnimationFrame } from './utils/use-animation-frame.mjs';
 export { animate } from './animation/animate.mjs';
 export { animateVisualElement } from './render/utils/animation.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';
@@ -56,7 +59,7 @@ export { LayoutGroupContext } from './context/LayoutGroupContext.mjs';
 export { DeprecatedLayoutGroupContext } from './context/DeprecatedLayoutGroupContext.mjs';
 export { SwitchLayoutGroupContext } from './context/SwitchLayoutGroupContext.mjs';
 export { FlatTree } from './render/utils/flat-tree.mjs';
-export { useAnimatedState as useDeprecatedAnimatedState } from './animation/use-animated-state.mjs';
+export { useAnimatedState as useDeprecatedAnimatedState } from './animation/hooks/use-animated-state.mjs';
 export { useInvertedScale as useDeprecatedInvertedScale } from './value/use-inverted-scale.mjs';
 export { AnimationType } from './render/utils/types.mjs';
 export { animations } from './motion/features/animations.mjs';

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

@@ -1,8 +1,10 @@
-import { startAnimation } from '../../animation/utils/transitions.mjs';
 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';
+import { createMotionValueAnimation } from '../../animation/index.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,7 +94,17 @@ function animateTarget(visualElement, definition, { delay = 0, transitionOverrid
                 delay: 0,
             };
         }
-        let animation = startAnimation(key, value, valueTarget, valueTransition);
+        /**
+         * 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 = value.start(createMotionValueAnimation(key, value, valueTarget, valueTransition));
         if (isWillChangeMotionValue(willChange)) {
             willChange.add(key);
             animation = animation.then(() => willChange.remove(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.1", `Attempting to mix Framer Motion versions ${nextValue.version} with 7.8.1 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

@@ -1,5 +1,5 @@
-import { sync } from '../frameloop/index.mjs';
 import { frameData } from '../frameloop/data.mjs';
+import { sync } from '../frameloop/index.mjs';
 import { SubscriptionManager } from '../utils/subscription-manager.mjs';
 import { velocityPerSecond } from '../utils/velocity-per-second.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.1";
         /**
          * Duration, in milliseconds, since last updating frame.
          *

package/dist/es/value/use-spring.mjs

@@ -40,8 +40,7 @@ function useSpring(source, config = {}) {
                 activeSpringAnimation.current.stop();
             }
             activeSpringAnimation.current = animate({
-                from: value.get(),
-                to: v,
+                keyframes: [value.get(), v],
                 velocity: value.getVelocity(),
                 type: "spring",
                 ...config,