framer-motion 11.6.0 → 11.8.0

package/dist/cjs/client-entry.js

@@ -340,6 +340,72 @@ function createRenderBatcher(scheduleNextBatch, allowKeepAlive) {
 
 const { schedule: frame, cancel: cancelFrame, state: frameData, steps: frameSteps, } = createRenderBatcher(typeof requestAnimationFrame !== "undefined" ? requestAnimationFrame : noop, true);
 
+/*
+  Bezier function generator
+  This has been modified from Gaëtan Renaudeau's BezierEasing
+  https://github.com/gre/bezier-easing/blob/master/src/index.js
+  https://github.com/gre/bezier-easing/blob/master/LICENSE
+  
+  I've removed the newtonRaphsonIterate algo because in benchmarking it
+  wasn't noticiably faster than binarySubdivision, indeed removing it
+  usually improved times, depending on the curve.
+  I also removed the lookup table, as for the added bundle size and loop we're
+  only cutting ~4 or so subdivision iterations. I bumped the max iterations up
+  to 12 to compensate and this still tended to be faster for no perceivable
+  loss in accuracy.
+  Usage
+    const easeOut = cubicBezier(.17,.67,.83,.67);
+    const x = easeOut(0.5); // returns 0.627...
+*/
+// Returns x(t) given t, x1, and x2, or y(t) given t, y1, and y2.
+const calcBezier = (t, a1, a2) => (((1.0 - 3.0 * a2 + 3.0 * a1) * t + (3.0 * a2 - 6.0 * a1)) * t + 3.0 * a1) *
+    t;
+const subdivisionPrecision = 0.0000001;
+const subdivisionMaxIterations = 12;
+function binarySubdivide(x, lowerBound, upperBound, mX1, mX2) {
+    let currentX;
+    let currentT;
+    let i = 0;
+    do {
+        currentT = lowerBound + (upperBound - lowerBound) / 2.0;
+        currentX = calcBezier(currentT, mX1, mX2) - x;
+        if (currentX > 0.0) {
+            upperBound = currentT;
+        }
+        else {
+            lowerBound = currentT;
+        }
+    } while (Math.abs(currentX) > subdivisionPrecision &&
+        ++i < subdivisionMaxIterations);
+    return currentT;
+}
+function cubicBezier(mX1, mY1, mX2, mY2) {
+    // If this is a linear gradient, return linear easing
+    if (mX1 === mY1 && mX2 === mY2)
+        return noop;
+    const getTForX = (aX) => binarySubdivide(aX, 0, 1, mX1, mX2);
+    // If animation is at start/end, return t without easing
+    return (t) => t === 0 || t === 1 ? t : calcBezier(getTForX(t), mY1, mY2);
+}
+
+// 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;
+
+// Accepts an easing function and returns a new one that outputs reversed values.
+// Turns easeIn into easeOut.
+const reverseEasing = (easing) => (p) => 1 - easing(1 - p);
+
+const backOut = /*@__PURE__*/ cubicBezier(0.33, 1.53, 0.69, 0.99);
+const backIn = /*@__PURE__*/ reverseEasing(backOut);
+const backInOut = /*@__PURE__*/ mirrorEasing(backIn);
+
+const anticipate = (p) => (p *= 2) < 1 ? 0.5 * backIn(p) : 0.5 * (2 - Math.pow(2, -10 * (p - 1)));
+
+const circIn = (p) => 1 - Math.sin(Math.acos(p));
+const circOut = reverseEasing(circIn);
+const circInOut = mirrorEasing(circIn);
+
 /**
  * Check if the value is a zero value string like "0px" or "0%"
  */
@@ -1215,6 +1281,10 @@ function memo(callback) {
     };
 }
 
+function isGenerator(type) {
+    return typeof type === "function";
+}
+
 let now;
 function clearTime() {
     now = undefined;
@@ -1302,7 +1372,8 @@ function canAnimate(keyframes, name, type, velocity) {
     if (!isOriginAnimatable || !isTargetAnimatable) {
         return false;
     }
-    return hasKeyframesChanged(keyframes) || (type === "spring" && velocity);
+    return (hasKeyframesChanged(keyframes) ||
+        ((type === "spring" || isGenerator(type)) && velocity));
 }
 
 /**
@@ -1718,54 +1789,6 @@ function inertia({ keyframes, velocity = 0.0, power = 0.8, timeConstant = 325, b
     };
 }
 
-/*
-  Bezier function generator
-  This has been modified from Gaëtan Renaudeau's BezierEasing
-  https://github.com/gre/bezier-easing/blob/master/src/index.js
-  https://github.com/gre/bezier-easing/blob/master/LICENSE
-  
-  I've removed the newtonRaphsonIterate algo because in benchmarking it
-  wasn't noticiably faster than binarySubdivision, indeed removing it
-  usually improved times, depending on the curve.
-  I also removed the lookup table, as for the added bundle size and loop we're
-  only cutting ~4 or so subdivision iterations. I bumped the max iterations up
-  to 12 to compensate and this still tended to be faster for no perceivable
-  loss in accuracy.
-  Usage
-    const easeOut = cubicBezier(.17,.67,.83,.67);
-    const x = easeOut(0.5); // returns 0.627...
-*/
-// Returns x(t) given t, x1, and x2, or y(t) given t, y1, and y2.
-const calcBezier = (t, a1, a2) => (((1.0 - 3.0 * a2 + 3.0 * a1) * t + (3.0 * a2 - 6.0 * a1)) * t + 3.0 * a1) *
-    t;
-const subdivisionPrecision = 0.0000001;
-const subdivisionMaxIterations = 12;
-function binarySubdivide(x, lowerBound, upperBound, mX1, mX2) {
-    let currentX;
-    let currentT;
-    let i = 0;
-    do {
-        currentT = lowerBound + (upperBound - lowerBound) / 2.0;
-        currentX = calcBezier(currentT, mX1, mX2) - x;
-        if (currentX > 0.0) {
-            upperBound = currentT;
-        }
-        else {
-            lowerBound = currentT;
-        }
-    } while (Math.abs(currentX) > subdivisionPrecision &&
-        ++i < subdivisionMaxIterations);
-    return currentT;
-}
-function cubicBezier(mX1, mY1, mX2, mY2) {
-    // If this is a linear gradient, return linear easing
-    if (mX1 === mY1 && mX2 === mY2)
-        return noop;
-    const getTForX = (aX) => binarySubdivide(aX, 0, 1, mX1, mX2);
-    // If animation is at start/end, return t without easing
-    return (t) => t === 0 || t === 1 ? t : calcBezier(getTForX(t), mY1, mY2);
-}
-
 const easeIn = /*@__PURE__*/ cubicBezier(0.42, 0, 1, 1);
 const easeOut = /*@__PURE__*/ cubicBezier(0, 0, 0.58, 1);
 const easeInOut = /*@__PURE__*/ cubicBezier(0.42, 0, 0.58, 1);
@@ -1774,24 +1797,6 @@ const isEasingArray = (ease) => {
     return Array.isArray(ease) && typeof ease[0] !== "number";
 };
 
-// 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;
-
-// Accepts an easing function and returns a new one that outputs reversed values.
-// Turns easeIn into easeOut.
-const reverseEasing = (easing) => (p) => 1 - easing(1 - p);
-
-const circIn = (p) => 1 - Math.sin(Math.acos(p));
-const circOut = reverseEasing(circIn);
-const circInOut = mirrorEasing(circIn);
-
-const backOut = /*@__PURE__*/ cubicBezier(0.33, 1.53, 0.69, 0.99);
-const backIn = /*@__PURE__*/ reverseEasing(backOut);
-const backInOut = /*@__PURE__*/ mirrorEasing(backIn);
-
-const anticipate = (p) => (p *= 2) < 1 ? 0.5 * backIn(p) : 0.5 * (2 - Math.pow(2, -10 * (p - 1)));
-
 const easingLookup = {
     linear: noop,
     easeIn,
@@ -2284,7 +2289,9 @@ class MainThreadAnimation extends BaseAnimation {
     }
     initPlayback(keyframes$1) {
         const { type = "keyframes", repeat = 0, repeatDelay = 0, repeatType, velocity = 0, } = this.options;
-        const generatorFactory = generators[type] || keyframes;
+        const generatorFactory = isGenerator(type)
+            ? type
+            : generators[type] || keyframes;
         /**
          * If our generator doesn't support mixing numbers, we need to replace keyframes with
          * [0, 100] and then make a function that maps that to the actual keyframes.
@@ -2597,9 +2604,47 @@ const acceleratedValues = new Set([
 
 const isBezierDefinition = (easing) => Array.isArray(easing) && typeof easing[0] === "number";
 
+// Create a linear easing point for every 10 ms
+const resolution = 10;
+const generateLinearEasing = (easing, duration // as milliseconds
+) => {
+    let points = "";
+    const numPoints = Math.max(Math.round(duration / resolution), 2);
+    for (let i = 0; i < numPoints; i++) {
+        points += easing(progress(0, numPoints - 1, i)) + ", ";
+    }
+    return `linear(${points.substring(0, points.length - 2)})`;
+};
+
+/**
+ * Add the ability for test suites to manually set support flags
+ * to better test more environments.
+ */
+const supportsFlags = {
+    linearEasing: undefined,
+};
+
+function memoSupports(callback, supportsFlag) {
+    const memoized = memo(callback);
+    return () => { var _a; return (_a = supportsFlags[supportsFlag]) !== null && _a !== void 0 ? _a : memoized(); };
+}
+
+const supportsLinearEasing = /*@__PURE__*/ memoSupports(() => {
+    try {
+        document
+            .createElement("div")
+            .animate({ opacity: 0 }, { easing: "linear(0, 1)" });
+    }
+    catch (e) {
+        return false;
+    }
+    return true;
+}, "linearEasing");
 function isWaapiSupportedEasing(easing) {
-    return Boolean(!easing ||
-        (typeof easing === "string" && easing in supportedWaapiEasing) ||
+    return Boolean((typeof easing === "function" && supportsLinearEasing()) ||
+        !easing ||
+        (typeof easing === "string" &&
+            (easing in supportedWaapiEasing || supportsLinearEasing())) ||
         isBezierDefinition(easing) ||
         (Array.isArray(easing) && easing.every(isWaapiSupportedEasing)));
 }
@@ -2615,19 +2660,19 @@ const supportedWaapiEasing = {
     backIn: /*@__PURE__*/ cubicBezierAsString([0.31, 0.01, 0.66, -0.59]),
     backOut: /*@__PURE__*/ cubicBezierAsString([0.33, 1.53, 0.69, 0.99]),
 };
-function mapEasingToNativeEasingWithDefault(easing) {
-    return (mapEasingToNativeEasing(easing) ||
-        supportedWaapiEasing.easeOut);
-}
-function mapEasingToNativeEasing(easing) {
+function mapEasingToNativeEasing(easing, duration) {
     if (!easing) {
         return undefined;
     }
+    else if (typeof easing === "function" && supportsLinearEasing()) {
+        return generateLinearEasing(easing, duration);
+    }
     else if (isBezierDefinition(easing)) {
         return cubicBezierAsString(easing);
     }
     else if (Array.isArray(easing)) {
-        return easing.map(mapEasingToNativeEasingWithDefault);
+        return easing.map((segmentEasing) => mapEasingToNativeEasing(segmentEasing, duration) ||
+            supportedWaapiEasing.easeOut);
     }
     else {
         return supportedWaapiEasing[easing];
@@ -2638,7 +2683,7 @@ function animateStyle(element, valueName, keyframes, { delay = 0, duration = 300
     const keyframeOptions = { [valueName]: keyframes };
     if (times)
         keyframeOptions.offset = times;
-    const easing = mapEasingToNativeEasing(ease);
+    const easing = mapEasingToNativeEasing(ease, duration);
     /**
      * If this is an easing array, apply to keyframes, not animation as a whole
      */
@@ -2672,7 +2717,9 @@ const maxDuration = 20000;
  * handing off.
  */
 function requiresPregeneratedKeyframes(options) {
-    return options.type === "spring" || !isWaapiSupportedEasing(options.ease);
+    return (isGenerator(options.type) ||
+        options.type === "spring" ||
+        !isWaapiSupportedEasing(options.ease));
 }
 function pregenerateKeyframes(keyframes, options) {
     /**
@@ -2706,6 +2753,14 @@ function pregenerateKeyframes(keyframes, options) {
         ease: "linear",
     };
 }
+const unsupportedEasingFunctions = {
+    anticipate,
+    backInOut,
+    circInOut,
+};
+function isUnsupportedEase(key) {
+    return key in unsupportedEasingFunctions;
+}
 class AcceleratedAnimation extends BaseAnimation {
     constructor(options) {
         super(options);
@@ -2723,6 +2778,16 @@ class AcceleratedAnimation extends BaseAnimation {
         if (!((_a = motionValue.owner) === null || _a === void 0 ? void 0 : _a.current)) {
             return false;
         }
+        /**
+         * If the user has provided an easing function name that isn't supported
+         * by WAAPI (like "anticipate"), we need to provide the corressponding
+         * function. This will later get converted to a linear() easing function.
+         */
+        if (typeof ease === "string" &&
+            supportsLinearEasing() &&
+            isUnsupportedEase(ease)) {
+            ease = unsupportedEasingFunctions[ease];
+        }
         /**
          * If this animation needs pre-generated keyframes then generate.
          */
@@ -3218,7 +3283,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 = "11.6.0";
+        this.version = "11.8.0";
         /**
          * Tracks whether this value can output a velocity. Currently this is only true
          * if the value is numerical, but we might be able to widen the scope here and support
@@ -5841,7 +5906,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "11.6.0", `Attempting to mix Framer Motion versions ${nextValue.version} with 11.6.0 may not work as expected.`);
+                warnOnce(nextValue.version === "11.8.0", `Attempting to mix Framer Motion versions ${nextValue.version} with 11.8.0 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {

package/dist/cjs/dom-entry.js

@@ -279,7 +279,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 = "11.6.0";
+        this.version = "11.8.0";
         /**
          * Tracks whether this value can output a velocity. Currently this is only true
          * if the value is numerical, but we might be able to widen the scope here and support
@@ -807,6 +807,72 @@ function getFinalKeyframe(keyframes, { repeat, repeatType = "loop" }, finalKeyfr
         : finalKeyframe;
 }
 
+/*
+  Bezier function generator
+  This has been modified from Gaëtan Renaudeau's BezierEasing
+  https://github.com/gre/bezier-easing/blob/master/src/index.js
+  https://github.com/gre/bezier-easing/blob/master/LICENSE
+  
+  I've removed the newtonRaphsonIterate algo because in benchmarking it
+  wasn't noticiably faster than binarySubdivision, indeed removing it
+  usually improved times, depending on the curve.
+  I also removed the lookup table, as for the added bundle size and loop we're
+  only cutting ~4 or so subdivision iterations. I bumped the max iterations up
+  to 12 to compensate and this still tended to be faster for no perceivable
+  loss in accuracy.
+  Usage
+    const easeOut = cubicBezier(.17,.67,.83,.67);
+    const x = easeOut(0.5); // returns 0.627...
+*/
+// Returns x(t) given t, x1, and x2, or y(t) given t, y1, and y2.
+const calcBezier = (t, a1, a2) => (((1.0 - 3.0 * a2 + 3.0 * a1) * t + (3.0 * a2 - 6.0 * a1)) * t + 3.0 * a1) *
+    t;
+const subdivisionPrecision = 0.0000001;
+const subdivisionMaxIterations = 12;
+function binarySubdivide(x, lowerBound, upperBound, mX1, mX2) {
+    let currentX;
+    let currentT;
+    let i = 0;
+    do {
+        currentT = lowerBound + (upperBound - lowerBound) / 2.0;
+        currentX = calcBezier(currentT, mX1, mX2) - x;
+        if (currentX > 0.0) {
+            upperBound = currentT;
+        }
+        else {
+            lowerBound = currentT;
+        }
+    } while (Math.abs(currentX) > subdivisionPrecision &&
+        ++i < subdivisionMaxIterations);
+    return currentT;
+}
+function cubicBezier(mX1, mY1, mX2, mY2) {
+    // If this is a linear gradient, return linear easing
+    if (mX1 === mY1 && mX2 === mY2)
+        return noop;
+    const getTForX = (aX) => binarySubdivide(aX, 0, 1, mX1, mX2);
+    // If animation is at start/end, return t without easing
+    return (t) => t === 0 || t === 1 ? t : calcBezier(getTForX(t), mY1, mY2);
+}
+
+// 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;
+
+// Accepts an easing function and returns a new one that outputs reversed values.
+// Turns easeIn into easeOut.
+const reverseEasing = (easing) => (p) => 1 - easing(1 - p);
+
+const backOut = /*@__PURE__*/ cubicBezier(0.33, 1.53, 0.69, 0.99);
+const backIn = /*@__PURE__*/ reverseEasing(backOut);
+const backInOut = /*@__PURE__*/ mirrorEasing(backIn);
+
+const anticipate = (p) => (p *= 2) < 1 ? 0.5 * backIn(p) : 0.5 * (2 - Math.pow(2, -10 * (p - 1)));
+
+const circIn = (p) => 1 - Math.sin(Math.acos(p));
+const circOut = reverseEasing(circIn);
+const circInOut = mirrorEasing(circIn);
+
 /**
  * Check if the value is a zero value string like "0px" or "0%"
  */
@@ -1658,6 +1724,10 @@ class DOMKeyframesResolver extends KeyframeResolver {
     }
 }
 
+function isGenerator(type) {
+    return typeof type === "function";
+}
+
 /**
  * Check if a value is animatable. Examples:
  *
@@ -1718,7 +1788,8 @@ function canAnimate(keyframes, name, type, velocity) {
     if (!isOriginAnimatable || !isTargetAnimatable) {
         return false;
     }
-    return hasKeyframesChanged(keyframes) || (type === "spring" && velocity);
+    return (hasKeyframesChanged(keyframes) ||
+        ((type === "spring" || isGenerator(type)) && velocity));
 }
 
 /**
@@ -2124,54 +2195,6 @@ function inertia({ keyframes, velocity = 0.0, power = 0.8, timeConstant = 325, b
     };
 }
 
-/*
-  Bezier function generator
-  This has been modified from Gaëtan Renaudeau's BezierEasing
-  https://github.com/gre/bezier-easing/blob/master/src/index.js
-  https://github.com/gre/bezier-easing/blob/master/LICENSE
-  
-  I've removed the newtonRaphsonIterate algo because in benchmarking it
-  wasn't noticiably faster than binarySubdivision, indeed removing it
-  usually improved times, depending on the curve.
-  I also removed the lookup table, as for the added bundle size and loop we're
-  only cutting ~4 or so subdivision iterations. I bumped the max iterations up
-  to 12 to compensate and this still tended to be faster for no perceivable
-  loss in accuracy.
-  Usage
-    const easeOut = cubicBezier(.17,.67,.83,.67);
-    const x = easeOut(0.5); // returns 0.627...
-*/
-// Returns x(t) given t, x1, and x2, or y(t) given t, y1, and y2.
-const calcBezier = (t, a1, a2) => (((1.0 - 3.0 * a2 + 3.0 * a1) * t + (3.0 * a2 - 6.0 * a1)) * t + 3.0 * a1) *
-    t;
-const subdivisionPrecision = 0.0000001;
-const subdivisionMaxIterations = 12;
-function binarySubdivide(x, lowerBound, upperBound, mX1, mX2) {
-    let currentX;
-    let currentT;
-    let i = 0;
-    do {
-        currentT = lowerBound + (upperBound - lowerBound) / 2.0;
-        currentX = calcBezier(currentT, mX1, mX2) - x;
-        if (currentX > 0.0) {
-            upperBound = currentT;
-        }
-        else {
-            lowerBound = currentT;
-        }
-    } while (Math.abs(currentX) > subdivisionPrecision &&
-        ++i < subdivisionMaxIterations);
-    return currentT;
-}
-function cubicBezier(mX1, mY1, mX2, mY2) {
-    // If this is a linear gradient, return linear easing
-    if (mX1 === mY1 && mX2 === mY2)
-        return noop;
-    const getTForX = (aX) => binarySubdivide(aX, 0, 1, mX1, mX2);
-    // If animation is at start/end, return t without easing
-    return (t) => t === 0 || t === 1 ? t : calcBezier(getTForX(t), mY1, mY2);
-}
-
 const easeIn = /*@__PURE__*/ cubicBezier(0.42, 0, 1, 1);
 const easeOut = /*@__PURE__*/ cubicBezier(0, 0, 0.58, 1);
 const easeInOut = /*@__PURE__*/ cubicBezier(0.42, 0, 0.58, 1);
@@ -2180,24 +2203,6 @@ const isEasingArray = (ease) => {
     return Array.isArray(ease) && typeof ease[0] !== "number";
 };
 
-// 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;
-
-// Accepts an easing function and returns a new one that outputs reversed values.
-// Turns easeIn into easeOut.
-const reverseEasing = (easing) => (p) => 1 - easing(1 - p);
-
-const circIn = (p) => 1 - Math.sin(Math.acos(p));
-const circOut = reverseEasing(circIn);
-const circInOut = mirrorEasing(circIn);
-
-const backOut = /*@__PURE__*/ cubicBezier(0.33, 1.53, 0.69, 0.99);
-const backIn = /*@__PURE__*/ reverseEasing(backOut);
-const backInOut = /*@__PURE__*/ mirrorEasing(backIn);
-
-const anticipate = (p) => (p *= 2) < 1 ? 0.5 * backIn(p) : 0.5 * (2 - Math.pow(2, -10 * (p - 1)));
-
 const easingLookup = {
     linear: noop,
     easeIn,
@@ -2690,7 +2695,9 @@ class MainThreadAnimation extends BaseAnimation {
     }
     initPlayback(keyframes$1) {
         const { type = "keyframes", repeat = 0, repeatDelay = 0, repeatType, velocity = 0, } = this.options;
-        const generatorFactory = generators[type] || keyframes;
+        const generatorFactory = isGenerator(type)
+            ? type
+            : generators[type] || keyframes;
         /**
          * If our generator doesn't support mixing numbers, we need to replace keyframes with
          * [0, 100] and then make a function that maps that to the actual keyframes.
@@ -3003,9 +3010,47 @@ const acceleratedValues = new Set([
 
 const isBezierDefinition = (easing) => Array.isArray(easing) && typeof easing[0] === "number";
 
+// Create a linear easing point for every 10 ms
+const resolution = 10;
+const generateLinearEasing = (easing, duration // as milliseconds
+) => {
+    let points = "";
+    const numPoints = Math.max(Math.round(duration / resolution), 2);
+    for (let i = 0; i < numPoints; i++) {
+        points += easing(progress(0, numPoints - 1, i)) + ", ";
+    }
+    return `linear(${points.substring(0, points.length - 2)})`;
+};
+
+/**
+ * Add the ability for test suites to manually set support flags
+ * to better test more environments.
+ */
+const supportsFlags = {
+    linearEasing: undefined,
+};
+
+function memoSupports(callback, supportsFlag) {
+    const memoized = memo(callback);
+    return () => { var _a; return (_a = supportsFlags[supportsFlag]) !== null && _a !== void 0 ? _a : memoized(); };
+}
+
+const supportsLinearEasing = /*@__PURE__*/ memoSupports(() => {
+    try {
+        document
+            .createElement("div")
+            .animate({ opacity: 0 }, { easing: "linear(0, 1)" });
+    }
+    catch (e) {
+        return false;
+    }
+    return true;
+}, "linearEasing");
 function isWaapiSupportedEasing(easing) {
-    return Boolean(!easing ||
-        (typeof easing === "string" && easing in supportedWaapiEasing) ||
+    return Boolean((typeof easing === "function" && supportsLinearEasing()) ||
+        !easing ||
+        (typeof easing === "string" &&
+            (easing in supportedWaapiEasing || supportsLinearEasing())) ||
         isBezierDefinition(easing) ||
         (Array.isArray(easing) && easing.every(isWaapiSupportedEasing)));
 }
@@ -3021,19 +3066,19 @@ const supportedWaapiEasing = {
     backIn: /*@__PURE__*/ cubicBezierAsString([0.31, 0.01, 0.66, -0.59]),
     backOut: /*@__PURE__*/ cubicBezierAsString([0.33, 1.53, 0.69, 0.99]),
 };
-function mapEasingToNativeEasingWithDefault(easing) {
-    return (mapEasingToNativeEasing(easing) ||
-        supportedWaapiEasing.easeOut);
-}
-function mapEasingToNativeEasing(easing) {
+function mapEasingToNativeEasing(easing, duration) {
     if (!easing) {
         return undefined;
     }
+    else if (typeof easing === "function" && supportsLinearEasing()) {
+        return generateLinearEasing(easing, duration);
+    }
     else if (isBezierDefinition(easing)) {
         return cubicBezierAsString(easing);
     }
     else if (Array.isArray(easing)) {
-        return easing.map(mapEasingToNativeEasingWithDefault);
+        return easing.map((segmentEasing) => mapEasingToNativeEasing(segmentEasing, duration) ||
+            supportedWaapiEasing.easeOut);
     }
     else {
         return supportedWaapiEasing[easing];
@@ -3044,7 +3089,7 @@ function animateStyle(element, valueName, keyframes, { delay = 0, duration = 300
     const keyframeOptions = { [valueName]: keyframes };
     if (times)
         keyframeOptions.offset = times;
-    const easing = mapEasingToNativeEasing(ease);
+    const easing = mapEasingToNativeEasing(ease, duration);
     /**
      * If this is an easing array, apply to keyframes, not animation as a whole
      */
@@ -3078,7 +3123,9 @@ const maxDuration = 20000;
  * handing off.
  */
 function requiresPregeneratedKeyframes(options) {
-    return options.type === "spring" || !isWaapiSupportedEasing(options.ease);
+    return (isGenerator(options.type) ||
+        options.type === "spring" ||
+        !isWaapiSupportedEasing(options.ease));
 }
 function pregenerateKeyframes(keyframes, options) {
     /**
@@ -3112,6 +3159,14 @@ function pregenerateKeyframes(keyframes, options) {
         ease: "linear",
     };
 }
+const unsupportedEasingFunctions = {
+    anticipate,
+    backInOut,
+    circInOut,
+};
+function isUnsupportedEase(key) {
+    return key in unsupportedEasingFunctions;
+}
 class AcceleratedAnimation extends BaseAnimation {
     constructor(options) {
         super(options);
@@ -3129,6 +3184,16 @@ class AcceleratedAnimation extends BaseAnimation {
         if (!((_a = motionValue.owner) === null || _a === void 0 ? void 0 : _a.current)) {
             return false;
         }
+        /**
+         * If the user has provided an easing function name that isn't supported
+         * by WAAPI (like "anticipate"), we need to provide the corressponding
+         * function. This will later get converted to a linear() easing function.
+         */
+        if (typeof ease === "string" &&
+            supportsLinearEasing() &&
+            isUnsupportedEase(ease)) {
+            ease = unsupportedEasingFunctions[ease];
+        }
         /**
          * If this animation needs pre-generated keyframes then generate.
          */
@@ -3757,7 +3822,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "11.6.0", `Attempting to mix Framer Motion versions ${nextValue.version} with 11.6.0 may not work as expected.`);
+                warnOnce(nextValue.version === "11.8.0", `Attempting to mix Framer Motion versions ${nextValue.version} with 11.8.0 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {
@@ -4859,7 +4924,7 @@ function createAnimationsFromSequence(sequence, { defaultTransition = {}, ...seq
              * If this animation should and can use a spring, generate a spring easing function.
              */
             const numKeyframes = valueKeyframesAsList.length;
-            if (numKeyframes <= 2 && type === "spring") {
+            if ((numKeyframes <= 2 && type === "spring") || isGenerator(type)) {
                 /**
                  * As we're creating an easing function from a spring,
                  * ideally we want to generate it using the real distance