framer-motion 7.8.1 → 7.9.0

package/README.md

@@ -43,6 +43,7 @@ It does all this:
 -   SVG paths
 -   Exit animations
 -   Server-side rendering
+-   Hardware-accelerated animations
 -   Orchestrate animations across components
 -   CSS variables
 
@@ -70,17 +71,17 @@ export const MyComponent = ({ isVisible }) => (
 
 ### 📚 Docs
 
-- Check out [our documentation](https://www.framer.com/docs/) for guides and a full API reference.
-- Or see [our examples](https://www.framer.com/docs/examples/) for inspiration.
+-   Check out [our documentation](https://www.framer.com/docs/) for guides and a full API reference.
+-   Or see [our examples](https://www.framer.com/docs/examples/) for inspiration.
 
 ### 💎 Contribute
 
-- Want to contribute to Framer Motion? Our [contributing guide](https://github.com/framer/motion/blob/master/CONTRIBUTING.md) has you covered.
+-   Want to contribute to Framer Motion? Our [contributing guide](https://github.com/framer/motion/blob/master/CONTRIBUTING.md) has you covered.
 
 ### 👩🏻‍⚖️ License
 
-- Framer Motion is MIT licensed.
+-   Framer Motion is MIT licensed.
 
 ### ✨ Framer
 
-- Design and publish sites that inspire. [Try Framer for free](https://www.framer.com/).
+-   Design and publish sites that inspire. [Try Framer for free](https://www.framer.com/).

package/dist/cjs/index.js

@@ -2119,12 +2119,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.1";
+        this.version = "7.9.0";
         /**
          * Duration, in milliseconds, since last updating frame.
          *
@@ -2213,6 +2213,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.
@@ -2312,6 +2313,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`
      *
@@ -2398,8 +2404,8 @@ class MotionValue {
         this.stop();
     }
 }
-function motionValue(init) {
-    return new MotionValue(init);
+function motionValue(init, options) {
+    return new MotionValue(init, options);
 }
 
 /**
@@ -2765,7 +2771,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;
         }
@@ -2842,38 +2848,6 @@ const instantAnimationState = {
     current: false,
 };
 
-/**
- *
- */
-function createAcceleratedAnimation() {
-    return () => { };
-}
-
-/**
- * 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);
-}
-
-function createInstantAnimation({ keyframes, elapsed, onUpdate, onComplete, }) {
-    const setValue = () => {
-        onUpdate && onUpdate(keyframes[keyframes.length - 1]);
-        onComplete && onComplete();
-        return () => { };
-    };
-    return elapsed ? delay(setValue, -elapsed) : setValue();
-}
-
 // Accepts an easing function and returns a new one that outputs mirrored values for
 // the second half of the animation. Turns easeIn into easeInOut.
 const mirrorEasing = (easing) => (p) => p <= 0.5 ? easing(2 * p) / 2 : (2 - easing(2 * (1 - p))) / 2;
@@ -3562,7 +3536,7 @@ const framesync = (update) => {
         stop: () => cancelSync.update(passTimestamp),
     };
 };
-function animate$1({ duration, driver = framesync, elapsed = 0, repeat: repeatMax = 0, repeatType = "loop", repeatDelay = 0, keyframes, onPlay, onStop, onComplete, onRepeat, onUpdate, type = "keyframes", ...options }) {
+function animate$1({ duration, driver = framesync, elapsed = 0, repeat: repeatMax = 0, repeatType = "loop", repeatDelay = 0, keyframes, autoplay = true, onPlay, onStop, onComplete, onRepeat, onUpdate, type = "keyframes", ...options }) {
     var _a, _b;
     let driverControls;
     let repeatCount = 0;
@@ -3633,15 +3607,132 @@ function animate$1({ duration, driver = framesync, elapsed = 0, repeat: repeatMa
         driverControls = driver(update);
         driverControls.start();
     }
-    play();
+    autoplay && play();
     return {
         stop: () => {
             onStop && onStop();
             driverControls.stop();
         },
+        sample: (t) => {
+            return animation.next(Math.max(0, t)).value;
+        },
     };
 }
 
+const cubicBezierAsString = ([a, b, c, d]) => `cubic-bezier(${a}, ${b}, ${c}, ${d})`;
+
+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",
+    });
+}
+
+/**
+ * 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$1(options);
+            value.setWithVelocity(sampleAnimation.sample(currentTime - sampleDelta), sampleAnimation.sample(currentTime), sampleDelta);
+        }
+        sync.update(() => animation.cancel());
+    };
+}
+
+/**
+ * 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);
+}
+
+function createInstantAnimation({ keyframes, elapsed, onUpdate, onComplete, }) {
+    const setValue = () => {
+        onUpdate && onUpdate(keyframes[keyframes.length - 1]);
+        onComplete && onComplete();
+        return () => { };
+    };
+    return elapsed ? delay(setValue, -elapsed) : setValue();
+}
+
 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;
@@ -3880,7 +3971,7 @@ for (const key in featureTests) {
 /**
  * A list of values that can be hardware-accelerated.
  */
-const acceleratedValues = new Set([]);
+const acceleratedValues = new Set(["opacity"]);
 const createMotionValueAnimation = (valueName, value, target, transition = {}) => {
     return (onComplete) => {
         const valueTransition = getValueTransition(transition, valueName) || {};
@@ -3960,19 +4051,22 @@ const createMotionValueAnimation = (valueName, value, target, transition = {}) =
         if (options.repeatDelay) {
             options.repeatDelay = secondsToMilliseconds(options.repeatDelay);
         }
-        const canAccelerateAnimation = acceleratedValues.has(valueName) &&
-            supports.waapi() &&
-            value.owner &&
-            !value.owner.getProps().onUpdate &&
-            !options.repeat;
+        const visualElement = value.owner;
+        const element = visualElement && visualElement.current;
+        const canAccelerateAnimation = supports.waapi() &&
+            acceleratedValues.has(valueName) &&
+            !options.repeatDelay &&
+            options.repeatType !== "mirror" &&
+            options.damping !== 0 &&
+            typeof options.ease !== "function" &&
+            visualElement &&
+            element instanceof HTMLElement &&
+            !visualElement.getProps().onUpdate;
         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();
+            return createAcceleratedAnimation(value, valueName, options);
         }
         else {
             /**
@@ -5833,7 +5927,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "7.8.1", `Attempting to mix Framer Motion versions ${nextValue.version} with 7.8.1 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)) {
@@ -5841,7 +5935,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);
             }
@@ -6256,7 +6350,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;
@@ -9652,20 +9746,6 @@ function useResetProjection() {
     return reset;
 }
 
-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];

package/dist/es/animation/index.mjs

@@ -1,7 +1,7 @@
 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 { createAcceleratedAnimation } from './waapi/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';
@@ -14,7 +14,7 @@ import { supports } from './waapi/supports.mjs';
 /**
  * A list of values that can be hardware-accelerated.
  */
-const acceleratedValues = new Set([]);
+const acceleratedValues = new Set(["opacity"]);
 const createMotionValueAnimation = (valueName, value, target, transition = {}) => {
     return (onComplete) => {
         const valueTransition = getValueTransition(transition, valueName) || {};
@@ -94,19 +94,22 @@ const createMotionValueAnimation = (valueName, value, target, transition = {}) =
         if (options.repeatDelay) {
             options.repeatDelay = secondsToMilliseconds(options.repeatDelay);
         }
-        const canAccelerateAnimation = acceleratedValues.has(valueName) &&
-            supports.waapi() &&
-            value.owner &&
-            !value.owner.getProps().onUpdate &&
-            !options.repeat;
+        const visualElement = value.owner;
+        const element = visualElement && visualElement.current;
+        const canAccelerateAnimation = supports.waapi() &&
+            acceleratedValues.has(valueName) &&
+            !options.repeatDelay &&
+            options.repeatType !== "mirror" &&
+            options.damping !== 0 &&
+            typeof options.ease !== "function" &&
+            visualElement &&
+            element instanceof HTMLElement &&
+            !visualElement.getProps().onUpdate;
         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();
+            return createAcceleratedAnimation(value, valueName, options);
         }
         else {
             /**

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

@@ -28,7 +28,7 @@ const framesync = (update) => {
         stop: () => cancelSync.update(passTimestamp),
     };
 };
-function animate({ duration, driver = framesync, elapsed = 0, repeat: repeatMax = 0, repeatType = "loop", repeatDelay = 0, keyframes, onPlay, onStop, onComplete, onRepeat, onUpdate, type = "keyframes", ...options }) {
+function animate({ duration, driver = framesync, elapsed = 0, repeat: repeatMax = 0, repeatType = "loop", repeatDelay = 0, keyframes, autoplay = true, onPlay, onStop, onComplete, onRepeat, onUpdate, type = "keyframes", ...options }) {
     var _a, _b;
     let driverControls;
     let repeatCount = 0;
@@ -99,12 +99,15 @@ function animate({ duration, driver = framesync, elapsed = 0, repeat: repeatMax
         driverControls = driver(update);
         driverControls.start();
     }
-    play();
+    autoplay && play();
     return {
         stop: () => {
             onStop && onStop();
             driverControls.stop();
         },
+        sample: (t) => {
+            return animation.next(Math.max(0, t)).value;
+        },
     };
 }
 

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/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/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.1", `Attempting to mix Framer Motion versions ${nextValue.version} with 7.8.1 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

@@ -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.1";
+        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 };