framer-motion 7.10.0 → 7.10.2

package/README.md

@@ -35,17 +35,18 @@ It looks like this:
 
 It does all this:
 
--   Springs
--   Keyframes
--   Layout animations
--   Shared layout animations
--   Gestures (drag/tap/hover)
--   SVG paths
--   Exit animations
+-   [Springs](https://www.framer.com/docs/transition/#spring)
+-   [Keyframes](https://www.framer.com/docs/animation/##keyframes)
+-   [Layout animations](https://www.framer.com/docs/layout-animations/)
+-   [Shared layout animations](https://www.framer.com/docs/layout-animations/#shared-layout-animations)
+-   [Gestures (drag/tap/hover)](https://www.framer.com/docs/gestures/)
+-   [Scroll animations](https://www.framer.com/docs/scroll-animations)
+-   [SVG paths](https://www.framer.com/docs/component/###svg-line-drawing)
+-   [Exit animations](https://www.framer.com/docs/animate-presence/)
 -   Server-side rendering
--   Hardware-accelerated animations
--   Orchestrate animations across components
--   CSS variables
+-   [Hardware-accelerated animations](https://www.framer.com/docs/animation/#hardware-accelerated-animations)
+-   [Orchestrate animations across components](https://www.framer.com/docs/animation/##orchestration)
+-   [CSS variables](https://www.framer.com/docs/component/##css-variables)
 
 ...and a whole lot more.
 

package/dist/cjs/index.js

@@ -2124,7 +2124,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.10.0";
+        this.version = "7.10.2";
         /**
          * Duration, in milliseconds, since last updating frame.
          *
@@ -3154,18 +3154,11 @@ const circIn = (p) => 1 - Math.sin(Math.acos(p));
 const circOut = reverseEasing(circIn);
 const circInOut = mirrorEasing(circOut);
 
-const createBackIn = (power = 1.525) => (p) => p * p * ((power + 1) * p - power);
-const backIn = createBackIn();
-const backOut = reverseEasing(backIn);
+const backOut = cubicBezier(0.33, 1.53, 0.69, 0.99);
+const backIn = reverseEasing(backOut);
 const backInOut = mirrorEasing(backIn);
 
-const createAnticipate = (power) => {
-    const backEasing = createBackIn(power);
-    return (p) => (p *= 2) < 1
-        ? 0.5 * backEasing(p)
-        : 0.5 * (2 - Math.pow(2, -10 * (p - 1)));
-};
-const anticipate = createAnticipate();
+const anticipate = (p) => (p *= 2) < 1 ? 0.5 * backIn(p) : 0.5 * (2 - Math.pow(2, -10 * (p - 1)));
 
 const easingLookup = {
     linear: noop,
@@ -3608,28 +3601,34 @@ function animate$1({ duration, driver = framesync, elapsed = 0, repeat: repeatMa
             driverControls.stop();
         },
         sample: (t) => {
-            return animation.next(Math.max(0, t)).value;
+            return animation.next(Math.max(0, t));
         },
     };
 }
 
-const cubicBezierAsString = ([a, b, c, d]) => `cubic-bezier(${a}, ${b}, ${c}, ${d})`;
-const validWaapiEasing = new Set([
-    "linear",
-    "ease-in",
-    "ease-out",
-    "ease-in-out",
-]);
-function mapEasingName(easingName) {
-    const name = camelToDash(easingName);
-    return validWaapiEasing.has(name) ? name : "ease";
+function isWaapiSupportedEasing(easing) {
+    return (!easing || // Default easing
+        Array.isArray(easing) || // Bezier curve
+        (typeof easing === "string" && supportedWaapiEasing[easing]));
 }
+const cubicBezierAsString = ([a, b, c, d]) => `cubic-bezier(${a}, ${b}, ${c}, ${d})`;
+const supportedWaapiEasing = {
+    linear: "linear",
+    ease: "ease",
+    easeIn: "ease-in",
+    easeOut: "ease-out",
+    easeInOut: "ease-in-out",
+    circIn: cubicBezierAsString([0, 0.65, 0.55, 1]),
+    circOut: cubicBezierAsString([0.55, 0, 1, 0.45]),
+    backIn: cubicBezierAsString([0.31, 0.01, 0.66, -0.59]),
+    backOut: cubicBezierAsString([0.33, 1.53, 0.69, 0.99]),
+};
 function mapEasingToNativeEasing(easing) {
     if (!easing)
         return undefined;
     return Array.isArray(easing)
         ? cubicBezierAsString(easing)
-        : mapEasingName(easing);
+        : supportedWaapiEasing[easing];
 }
 
 function animateStyle(element, valueName, keyframes, { delay = 0, duration, repeat = 0, repeatType = "loop", ease, times, } = {}) {
@@ -3652,23 +3651,19 @@ 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 this animation needs pre-generated keyframes then generate.
      */
-    if (options.type === "spring") {
-        const springAnimation = spring(options);
+    if (options.type === "spring" || !isWaapiSupportedEasing(options.ease)) {
+        const sampleAnimation = animate$1(options);
         let state = { done: false, value: keyframes[0] };
-        const springKeyframes = [];
+        const pregeneratedKeyframes = [];
         let t = 0;
         while (!state.done) {
-            state = springAnimation.next(t);
-            springKeyframes.push(state.value);
+            state = sampleAnimation.sample(t);
+            pregeneratedKeyframes.push(state.value);
             t += sampleDelta;
         }
-        keyframes = springKeyframes;
+        keyframes = pregeneratedKeyframes;
         duration = t - sampleDelta;
         ease = "linear";
     }
@@ -3713,7 +3708,7 @@ function createAcceleratedAnimation(value, valueName, { onUpdate, onComplete, ..
         const { currentTime } = animation;
         if (currentTime) {
             const sampleAnimation = animate$1(options);
-            value.setWithVelocity(sampleAnimation.sample(currentTime - sampleDelta), sampleAnimation.sample(currentTime), sampleDelta);
+            value.setWithVelocity(sampleAnimation.sample(currentTime - sampleDelta).value, sampleAnimation.sample(currentTime).value, sampleDelta);
         }
         sync.update(() => animation.cancel());
     };
@@ -4069,7 +4064,6 @@ const createMotionValueAnimation = (valueName, value, target, transition = {}) =
             !options.repeatDelay &&
             options.repeatType !== "mirror" &&
             options.damping !== 0 &&
-            typeof options.ease !== "function" &&
             visualElement &&
             element instanceof HTMLElement &&
             !visualElement.getProps().onUpdate;
@@ -5938,7 +5932,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "7.10.0", `Attempting to mix Framer Motion versions ${nextValue.version} with 7.10.0 may not work as expected.`);
+                warnOnce(nextValue.version === "7.10.2", `Attempting to mix Framer Motion versions ${nextValue.version} with 7.10.2 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {

package/dist/es/animation/index.mjs

@@ -101,7 +101,6 @@ const createMotionValueAnimation = (valueName, value, target, transition = {}) =
             !options.repeatDelay &&
             options.repeatType !== "mirror" &&
             options.damping !== 0 &&
-            typeof options.ease !== "function" &&
             visualElement &&
             element instanceof HTMLElement &&
             !visualElement.getProps().onUpdate;

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

@@ -106,7 +106,7 @@ function animate({ duration, driver = framesync, elapsed = 0, repeat: repeatMax
             driverControls.stop();
         },
         sample: (t) => {
-            return animation.next(Math.max(0, t)).value;
+            return animation.next(Math.max(0, t));
         },
     };
 }

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

@@ -1,7 +1,7 @@
 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';
+import { isWaapiSupportedEasing } from './easing.mjs';
 
 /**
  * 10ms is chosen here as it strikes a balance between smooth
@@ -12,23 +12,19 @@ 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 this animation needs pre-generated keyframes then generate.
      */
-    if (options.type === "spring") {
-        const springAnimation = spring(options);
+    if (options.type === "spring" || !isWaapiSupportedEasing(options.ease)) {
+        const sampleAnimation = animate(options);
         let state = { done: false, value: keyframes[0] };
-        const springKeyframes = [];
+        const pregeneratedKeyframes = [];
         let t = 0;
         while (!state.done) {
-            state = springAnimation.next(t);
-            springKeyframes.push(state.value);
+            state = sampleAnimation.sample(t);
+            pregeneratedKeyframes.push(state.value);
             t += sampleDelta;
         }
-        keyframes = springKeyframes;
+        keyframes = pregeneratedKeyframes;
         duration = t - sampleDelta;
         ease = "linear";
     }
@@ -73,7 +69,7 @@ function createAcceleratedAnimation(value, valueName, { onUpdate, onComplete, ..
         const { currentTime } = animation;
         if (currentTime) {
             const sampleAnimation = animate(options);
-            value.setWithVelocity(sampleAnimation.sample(currentTime - sampleDelta), sampleAnimation.sample(currentTime), sampleDelta);
+            value.setWithVelocity(sampleAnimation.sample(currentTime - sampleDelta).value, sampleAnimation.sample(currentTime).value, sampleDelta);
         }
         sync.update(() => animation.cancel());
     };

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

@@ -1,22 +1,26 @@
-import { camelToDash } from '../../render/dom/utils/camel-to-dash.mjs';
-
-const cubicBezierAsString = ([a, b, c, d]) => `cubic-bezier(${a}, ${b}, ${c}, ${d})`;
-const validWaapiEasing = new Set([
-    "linear",
-    "ease-in",
-    "ease-out",
-    "ease-in-out",
-]);
-function mapEasingName(easingName) {
-    const name = camelToDash(easingName);
-    return validWaapiEasing.has(name) ? name : "ease";
+function isWaapiSupportedEasing(easing) {
+    return (!easing || // Default easing
+        Array.isArray(easing) || // Bezier curve
+        (typeof easing === "string" && supportedWaapiEasing[easing]));
 }
+const cubicBezierAsString = ([a, b, c, d]) => `cubic-bezier(${a}, ${b}, ${c}, ${d})`;
+const supportedWaapiEasing = {
+    linear: "linear",
+    ease: "ease",
+    easeIn: "ease-in",
+    easeOut: "ease-out",
+    easeInOut: "ease-in-out",
+    circIn: cubicBezierAsString([0, 0.65, 0.55, 1]),
+    circOut: cubicBezierAsString([0.55, 0, 1, 0.45]),
+    backIn: cubicBezierAsString([0.31, 0.01, 0.66, -0.59]),
+    backOut: cubicBezierAsString([0.33, 1.53, 0.69, 0.99]),
+};
 function mapEasingToNativeEasing(easing) {
     if (!easing)
         return undefined;
     return Array.isArray(easing)
         ? cubicBezierAsString(easing)
-        : mapEasingName(easing);
+        : supportedWaapiEasing[easing];
 }
 
-export { cubicBezierAsString, mapEasingName, mapEasingToNativeEasing };
+export { cubicBezierAsString, isWaapiSupportedEasing, mapEasingToNativeEasing, supportedWaapiEasing };

package/dist/es/easing/anticipate.mjs

@@ -1,11 +1,5 @@
-import { createBackIn } from './back.mjs';
+import { backIn } from './back.mjs';
 
-const createAnticipate = (power) => {
-    const backEasing = createBackIn(power);
-    return (p) => (p *= 2) < 1
-        ? 0.5 * backEasing(p)
-        : 0.5 * (2 - Math.pow(2, -10 * (p - 1)));
-};
-const anticipate = createAnticipate();
+const anticipate = (p) => (p *= 2) < 1 ? 0.5 * backIn(p) : 0.5 * (2 - Math.pow(2, -10 * (p - 1)));
 
 export { anticipate };

package/dist/es/easing/back.mjs

@@ -1,9 +1,9 @@
+import { cubicBezier } from './cubic-bezier.mjs';
 import { mirrorEasing } from './modifiers/mirror.mjs';
 import { reverseEasing } from './modifiers/reverse.mjs';
 
-const createBackIn = (power = 1.525) => (p) => p * p * ((power + 1) * p - power);
-const backIn = createBackIn();
-const backOut = reverseEasing(backIn);
+const backOut = cubicBezier(0.33, 1.53, 0.69, 0.99);
+const backIn = reverseEasing(backOut);
 const backInOut = mirrorEasing(backIn);
 
-export { backIn, backInOut, backOut, createBackIn };
+export { backIn, backInOut, backOut };

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.10.0", `Attempting to mix Framer Motion versions ${nextValue.version} with 7.10.0 may not work as expected.`);
+                warnOnce(nextValue.version === "7.10.2", `Attempting to mix Framer Motion versions ${nextValue.version} with 7.10.2 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {

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.10.0";
+        this.version = "7.10.2";
         /**
          * Duration, in milliseconds, since last updating frame.
          *

package/dist/framer-motion.dev.js

@@ -2122,7 +2122,7 @@
              * 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.10.0";
+            this.version = "7.10.2";
             /**
              * Duration, in milliseconds, since last updating frame.
              *
@@ -3167,18 +3167,11 @@
     const circOut = reverseEasing(circIn);
     const circInOut = mirrorEasing(circOut);
 
-    const createBackIn = (power = 1.525) => (p) => p * p * ((power + 1) * p - power);
-    const backIn = createBackIn();
-    const backOut = reverseEasing(backIn);
+    const backOut = cubicBezier(0.33, 1.53, 0.69, 0.99);
+    const backIn = reverseEasing(backOut);
     const backInOut = mirrorEasing(backIn);
 
-    const createAnticipate = (power) => {
-        const backEasing = createBackIn(power);
-        return (p) => (p *= 2) < 1
-            ? 0.5 * backEasing(p)
-            : 0.5 * (2 - Math.pow(2, -10 * (p - 1)));
-    };
-    const anticipate = createAnticipate();
+    const anticipate = (p) => (p *= 2) < 1 ? 0.5 * backIn(p) : 0.5 * (2 - Math.pow(2, -10 * (p - 1)));
 
     const easingLookup = {
         linear: noop,
@@ -3621,28 +3614,34 @@
                 driverControls.stop();
             },
             sample: (t) => {
-                return animation.next(Math.max(0, t)).value;
+                return animation.next(Math.max(0, t));
             },
         };
     }
 
-    const cubicBezierAsString = ([a, b, c, d]) => `cubic-bezier(${a}, ${b}, ${c}, ${d})`;
-    const validWaapiEasing = new Set([
-        "linear",
-        "ease-in",
-        "ease-out",
-        "ease-in-out",
-    ]);
-    function mapEasingName(easingName) {
-        const name = camelToDash(easingName);
-        return validWaapiEasing.has(name) ? name : "ease";
+    function isWaapiSupportedEasing(easing) {
+        return (!easing || // Default easing
+            Array.isArray(easing) || // Bezier curve
+            (typeof easing === "string" && supportedWaapiEasing[easing]));
     }
+    const cubicBezierAsString = ([a, b, c, d]) => `cubic-bezier(${a}, ${b}, ${c}, ${d})`;
+    const supportedWaapiEasing = {
+        linear: "linear",
+        ease: "ease",
+        easeIn: "ease-in",
+        easeOut: "ease-out",
+        easeInOut: "ease-in-out",
+        circIn: cubicBezierAsString([0, 0.65, 0.55, 1]),
+        circOut: cubicBezierAsString([0.55, 0, 1, 0.45]),
+        backIn: cubicBezierAsString([0.31, 0.01, 0.66, -0.59]),
+        backOut: cubicBezierAsString([0.33, 1.53, 0.69, 0.99]),
+    };
     function mapEasingToNativeEasing(easing) {
         if (!easing)
             return undefined;
         return Array.isArray(easing)
             ? cubicBezierAsString(easing)
-            : mapEasingName(easing);
+            : supportedWaapiEasing[easing];
     }
 
     function animateStyle(element, valueName, keyframes, { delay = 0, duration, repeat = 0, repeatType = "loop", ease, times, } = {}) {
@@ -3665,23 +3664,19 @@
     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 this animation needs pre-generated keyframes then generate.
          */
-        if (options.type === "spring") {
-            const springAnimation = spring(options);
+        if (options.type === "spring" || !isWaapiSupportedEasing(options.ease)) {
+            const sampleAnimation = animate$1(options);
             let state = { done: false, value: keyframes[0] };
-            const springKeyframes = [];
+            const pregeneratedKeyframes = [];
             let t = 0;
             while (!state.done) {
-                state = springAnimation.next(t);
-                springKeyframes.push(state.value);
+                state = sampleAnimation.sample(t);
+                pregeneratedKeyframes.push(state.value);
                 t += sampleDelta;
             }
-            keyframes = springKeyframes;
+            keyframes = pregeneratedKeyframes;
             duration = t - sampleDelta;
             ease = "linear";
         }
@@ -3726,7 +3721,7 @@
             const { currentTime } = animation;
             if (currentTime) {
                 const sampleAnimation = animate$1(options);
-                value.setWithVelocity(sampleAnimation.sample(currentTime - sampleDelta), sampleAnimation.sample(currentTime), sampleDelta);
+                value.setWithVelocity(sampleAnimation.sample(currentTime - sampleDelta).value, sampleAnimation.sample(currentTime).value, sampleDelta);
             }
             sync.update(() => animation.cancel());
         };
@@ -4082,7 +4077,6 @@
                 !options.repeatDelay &&
                 options.repeatType !== "mirror" &&
                 options.damping !== 0 &&
-                typeof options.ease !== "function" &&
                 visualElement &&
                 element instanceof HTMLElement &&
                 !visualElement.getProps().onUpdate;
@@ -5951,7 +5945,7 @@
                  * and warn against mismatches.
                  */
                 {
-                    warnOnce(nextValue.version === "7.10.0", `Attempting to mix Framer Motion versions ${nextValue.version} with 7.10.0 may not work as expected.`);
+                    warnOnce(nextValue.version === "7.10.2", `Attempting to mix Framer Motion versions ${nextValue.version} with 7.10.2 may not work as expected.`);
                 }
             }
             else if (isMotionValue(prevValue)) {