framer-motion 7.8.0 → 7.9.0

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 { 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.
@@ -18,149 +8,6 @@ import { delay } from '../../utils/delay.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) || {};
-    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") {
-        /**
-         * 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),
-        };
-        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);
-                },
-                onComplete: () => {
-                    options.onComplete();
-                    valueTransition.onComplete &&
-                        valueTransition.onComplete();
-                },
-            });
-        return () => animation.stop();
-    }
-    function set() {
-        const finalTarget = resolveFinalValueInKeyframes(target);
-        value.set(finalTarget);
-        onComplete();
-        valueTransition.onUpdate && valueTransition.onUpdate(finalTarget);
-        valueTransition.onComplete && valueTransition.onComplete();
-        return () => { };
-    }
-    const useInstantAnimation = !isOriginAnimatable ||
-        !isTargetAnimatable ||
-        valueTransition.type === false;
-    return useInstantAnimation
-        ? valueTransition.elapsed
-            ? () => delay(set, -valueTransition.elapsed)
-            : set()
-        : start();
-}
 function isZero(value) {
     return (value === 0 ||
         (typeof value === "string" &&
@@ -175,17 +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) => {
-        return getAnimation(key, value, target, { ...transition, delay: getDelayFromTransition(transition, key) }, onComplete);
-    });
-}
 
-export { convertTransitionToAnimationOptions, getDelayFromTransition, getPopmotionAnimationOptions, getValueTransition, getZeroUnit, hydrateKeyframes, isTransitionDefined, isZero, startAnimation };
+export { getValueTransition, getZeroUnit, isTransitionDefined, isZero };

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

@@ -0,0 +1,82 @@
+import { sync } from '../../frameloop/index.mjs';
+import { animate } from '../legacy-popmotion/index.mjs';
+import { spring } from '../legacy-popmotion/spring.mjs';
+import { animateStyle } from './index.mjs';
+
+/**
+ * 10ms is chosen here as it strikes a balance between smooth
+ * results (more than one keyframe per frame at 60fps) and
+ * keyframe quantity.
+ */
+const sampleDelta = 10; //ms
+function createAcceleratedAnimation(value, valueName, { onUpdate, onComplete, ...options }) {
+    let { keyframes, duration = 0.3, elapsed = 0, ease } = options;
+    /**
+     * If this is a spring animation, pre-generate keyframes and
+     * record duration.
+     *
+     * TODO: When introducing support for values beyond opacity it
+     * might be better to use `animate.sample()`
+     */
+    if (options.type === "spring") {
+        const springAnimation = spring(options);
+        let state = { done: false, value: keyframes[0] };
+        const springKeyframes = [];
+        let t = 0;
+        while (!state.done) {
+            state = springAnimation.next(t);
+            springKeyframes.push(state.value);
+            t += sampleDelta;
+        }
+        keyframes = springKeyframes;
+        duration = t - sampleDelta;
+        ease = "linear";
+    }
+    const animation = animateStyle(value.owner.current, valueName, keyframes, {
+        ...options,
+        delay: -elapsed,
+        duration,
+        /**
+         * This function is currently not called if ease is provided
+         * as a function so the cast is safe.
+         *
+         * However it would be possible for a future refinement to port
+         * in easing pregeneration from Motion One for browsers that
+         * support the upcoming `linear()` easing function.
+         */
+        ease: ease,
+    });
+    /**
+     * Prefer the `onfinish` prop as it's more widely supported than
+     * the `finished` promise.
+     *
+     * Here, we synchronously set the provided MotionValue to the end
+     * keyframe. If we didn't, when the WAAPI animation is finished it would
+     * be removed from the element which would then revert to its old styles.
+     */
+    animation.onfinish = () => {
+        value.set(keyframes[keyframes.length - 1]);
+        onComplete && onComplete();
+    };
+    /**
+     * Animation interrupt callback.
+     */
+    return () => {
+        /**
+         * WAAPI doesn't natively have any interruption capabilities.
+         *
+         * Rather than read commited styles back out of the DOM, we can
+         * create a renderless JS animation and sample it twice to calculate
+         * its current value, "previous" value, and therefore allow
+         * Motion to calculate velocity for any subsequent animation.
+         */
+        const { currentTime } = animation;
+        if (currentTime) {
+            const sampleAnimation = animate(options);
+            value.setWithVelocity(sampleAnimation.sample(currentTime - sampleDelta), sampleAnimation.sample(currentTime), sampleDelta);
+        }
+        sync.update(() => animation.cancel());
+    };
+}
+
+export { createAcceleratedAnimation };

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

@@ -1,16 +1,14 @@
-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 }, {
+function animateStyle(element, valueName, keyframes, { delay = 0, duration, repeat = 0, repeatType = "loop", ease, times, } = {}) {
+    return element.animate({ [valueName]: keyframes, offset: times }, {
         delay,
         duration,
         easing: Array.isArray(ease) ? cubicBezierAsString(ease) : ease,
         fill: "both",
+        iterations: repeat + 1,
+        direction: repeatType === "reverse" ? "alternate" : "normal",
     });
-    return animation;
 }
 
 export { animateStyle };

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';
@@ -59,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/VisualElement.mjs

@@ -403,7 +403,7 @@ class VisualElement {
         }
         let value = this.values.get(key);
         if (value === undefined && defaultValue !== undefined) {
-            value = motionValue(defaultValue);
+            value = motionValue(defaultValue, { owner: this });
             this.addValue(key, value);
         }
         return value;

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

@@ -1,10 +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);
@@ -104,7 +104,7 @@ function animateTarget(visualElement, definition, { delay = 0, transitionOverrid
                 valueTransition.elapsed = handoffOptimizedAppearAnimation(appearId, key);
             }
         }
-        let animation = startAnimation(key, value, valueTarget, valueTransition);
+        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.8.0", `Attempting to mix Framer Motion versions ${nextValue.version} with 7.8.0 may not work as expected.`);
+                warnOnce(nextValue.version === "7.9.0", `Attempting to mix Framer Motion versions ${nextValue.version} with 7.9.0 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {
@@ -30,7 +30,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * If we're swapping from a motion value to a static value,
              * create a new motion value from that
              */
-            element.addValue(key, motionValue(nextValue));
+            element.addValue(key, motionValue(nextValue, { owner: element }));
             if (isWillChangeMotionValue(willChange)) {
                 willChange.remove(key);
             }

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

@@ -89,7 +89,7 @@ function checkTargetForNewValues(visualElement, target, origin) {
         else if (!findValueType(value) && complex.test(targetValue)) {
             value = getAnimatableNone(key, targetValue);
         }
-        visualElement.addValue(key, motionValue(value));
+        visualElement.addValue(key, motionValue(value, { owner: visualElement }));
         if (origin[key] === undefined) {
             origin[key] = value;
         }

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';
 
@@ -20,12 +20,12 @@ class MotionValue {
      *
      * @internal
      */
-    constructor(init) {
+    constructor(init, options = {}) {
         /**
          * 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.8.0";
+        this.version = "7.9.0";
         /**
          * Duration, in milliseconds, since last updating frame.
          *
@@ -114,6 +114,7 @@ class MotionValue {
         this.hasAnimated = false;
         this.prev = this.current = init;
         this.canTrackVelocity = isFloat(this.current);
+        this.owner = options.owner;
     }
     /**
      * Adds a function that will be notified when the `MotionValue` is updated.
@@ -213,6 +214,11 @@ class MotionValue {
             this.passiveEffect(v, this.updateAndNotify);
         }
     }
+    setWithVelocity(prev, current, delta) {
+        this.set(current);
+        this.prev = prev;
+        this.timeDelta = delta;
+    }
     /**
      * Returns the latest state of `MotionValue`
      *
@@ -299,8 +305,8 @@ class MotionValue {
         this.stop();
     }
 }
-function motionValue(init) {
-    return new MotionValue(init);
+function motionValue(init, options) {
+    return new MotionValue(init, options);
 }
 
 export { MotionValue, motionValue };

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,