framer-motion 9.0.7 → 9.1.0

package/dist/cjs/index.js

@@ -2015,7 +2015,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 = "9.0.7";
+        this.version = "9.1.0";
         /**
          * Duration, in milliseconds, since last updating frame.
          *
@@ -3598,7 +3598,12 @@ function getFinalKeyframe(keyframes, { repeat, repeatType = "loop" }) {
 /**
  * A list of values that can be hardware-accelerated.
  */
-const acceleratedValues = new Set(["opacity"]);
+const acceleratedValues = new Set([
+    "opacity",
+    "clipPath",
+    "filter",
+    "transform",
+]);
 /**
  * 10ms is chosen here as it strikes a balance between smooth
  * results (more than one keyframe per frame at 60fps) and
@@ -3809,51 +3814,41 @@ function inertia({ keyframes, velocity = 0, min, max, power = 0.8, timeConstant
     };
 }
 
-const underDampedSpring = () => ({
+const underDampedSpring = {
     type: "spring",
     stiffness: 500,
     damping: 25,
     restSpeed: 10,
-});
+};
 const criticallyDampedSpring = (target) => ({
     type: "spring",
     stiffness: 550,
     damping: target === 0 ? 2 * Math.sqrt(550) : 30,
     restSpeed: 10,
 });
-const linearTween = () => ({
-    type: "keyframes",
-    ease: "linear",
-    duration: 0.3,
-});
 const keyframesTransition = {
     type: "keyframes",
     duration: 0.8,
 };
-const defaultTransitions = {
-    x: underDampedSpring,
-    y: underDampedSpring,
-    z: underDampedSpring,
-    rotate: underDampedSpring,
-    rotateX: underDampedSpring,
-    rotateY: underDampedSpring,
-    rotateZ: underDampedSpring,
-    scaleX: criticallyDampedSpring,
-    scaleY: criticallyDampedSpring,
-    scale: criticallyDampedSpring,
-    opacity: linearTween,
-    backgroundColor: linearTween,
-    color: linearTween,
-    default: criticallyDampedSpring,
+/**
+ * Default easing curve is a slightly shallower version of
+ * the default browser easing curve.
+ */
+const ease = {
+    type: "keyframes",
+    ease: [0.25, 0.1, 0.35, 1],
+    duration: 0.3,
 };
 const getDefaultTransition = (valueKey, { keyframes }) => {
     if (keyframes.length > 2) {
         return keyframesTransition;
     }
-    else {
-        const factory = defaultTransitions[valueKey] || defaultTransitions.default;
-        return factory(keyframes[1]);
+    else if (transformProps.has(valueKey)) {
+        return valueKey.startsWith("scale")
+            ? criticallyDampedSpring(keyframes[1])
+            : underDampedSpring;
     }
+    return ease;
 };
 
 /**
@@ -7774,7 +7769,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "9.0.7", `Attempting to mix Framer Motion versions ${nextValue.version} with 9.0.7 may not work as expected.`);
+                warnOnce(nextValue.version === "9.1.0", `Attempting to mix Framer Motion versions ${nextValue.version} with 9.1.0 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {

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

@@ -1,48 +1,40 @@
-const underDampedSpring = () => ({
+import { transformProps } from '../../render/html/utils/transform.mjs';
+
+const underDampedSpring = {
     type: "spring",
     stiffness: 500,
     damping: 25,
     restSpeed: 10,
-});
+};
 const criticallyDampedSpring = (target) => ({
     type: "spring",
     stiffness: 550,
     damping: target === 0 ? 2 * Math.sqrt(550) : 30,
     restSpeed: 10,
 });
-const linearTween = () => ({
-    type: "keyframes",
-    ease: "linear",
-    duration: 0.3,
-});
 const keyframesTransition = {
     type: "keyframes",
     duration: 0.8,
 };
-const defaultTransitions = {
-    x: underDampedSpring,
-    y: underDampedSpring,
-    z: underDampedSpring,
-    rotate: underDampedSpring,
-    rotateX: underDampedSpring,
-    rotateY: underDampedSpring,
-    rotateZ: underDampedSpring,
-    scaleX: criticallyDampedSpring,
-    scaleY: criticallyDampedSpring,
-    scale: criticallyDampedSpring,
-    opacity: linearTween,
-    backgroundColor: linearTween,
-    color: linearTween,
-    default: criticallyDampedSpring,
+/**
+ * Default easing curve is a slightly shallower version of
+ * the default browser easing curve.
+ */
+const ease = {
+    type: "keyframes",
+    ease: [0.25, 0.1, 0.35, 1],
+    duration: 0.3,
 };
 const getDefaultTransition = (valueKey, { keyframes }) => {
     if (keyframes.length > 2) {
         return keyframesTransition;
     }
-    else {
-        const factory = defaultTransitions[valueKey] || defaultTransitions.default;
-        return factory(keyframes[1]);
+    else if (transformProps.has(valueKey)) {
+        return valueKey.startsWith("scale")
+            ? criticallyDampedSpring(keyframes[1])
+            : underDampedSpring;
     }
+    return ease;
 };
 
-export { criticallyDampedSpring, getDefaultTransition, linearTween, underDampedSpring };
+export { getDefaultTransition };

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

@@ -8,7 +8,12 @@ import { getFinalKeyframe } from './utils/get-final-keyframe.mjs';
 /**
  * A list of values that can be hardware-accelerated.
  */
-const acceleratedValues = new Set(["opacity"]);
+const acceleratedValues = new Set([
+    "opacity",
+    "clipPath",
+    "filter",
+    "transform",
+]);
 /**
  * 10ms is chosen here as it strikes a balance between smooth
  * results (more than one keyframe per frame at 60fps) and

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 === "9.0.7", `Attempting to mix Framer Motion versions ${nextValue.version} with 9.0.7 may not work as expected.`);
+                warnOnce(nextValue.version === "9.1.0", `Attempting to mix Framer Motion versions ${nextValue.version} with 9.1.0 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 = "9.0.7";
+        this.version = "9.1.0";
         /**
          * Duration, in milliseconds, since last updating frame.
          *

package/dist/framer-motion.dev.js

@@ -2013,7 +2013,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 = "9.0.7";
+            this.version = "9.1.0";
             /**
              * Duration, in milliseconds, since last updating frame.
              *
@@ -3611,7 +3611,12 @@
     /**
      * A list of values that can be hardware-accelerated.
      */
-    const acceleratedValues = new Set(["opacity"]);
+    const acceleratedValues = new Set([
+        "opacity",
+        "clipPath",
+        "filter",
+        "transform",
+    ]);
     /**
      * 10ms is chosen here as it strikes a balance between smooth
      * results (more than one keyframe per frame at 60fps) and
@@ -3822,51 +3827,41 @@
         };
     }
 
-    const underDampedSpring = () => ({
+    const underDampedSpring = {
         type: "spring",
         stiffness: 500,
         damping: 25,
         restSpeed: 10,
-    });
+    };
     const criticallyDampedSpring = (target) => ({
         type: "spring",
         stiffness: 550,
         damping: target === 0 ? 2 * Math.sqrt(550) : 30,
         restSpeed: 10,
     });
-    const linearTween = () => ({
-        type: "keyframes",
-        ease: "linear",
-        duration: 0.3,
-    });
     const keyframesTransition = {
         type: "keyframes",
         duration: 0.8,
     };
-    const defaultTransitions = {
-        x: underDampedSpring,
-        y: underDampedSpring,
-        z: underDampedSpring,
-        rotate: underDampedSpring,
-        rotateX: underDampedSpring,
-        rotateY: underDampedSpring,
-        rotateZ: underDampedSpring,
-        scaleX: criticallyDampedSpring,
-        scaleY: criticallyDampedSpring,
-        scale: criticallyDampedSpring,
-        opacity: linearTween,
-        backgroundColor: linearTween,
-        color: linearTween,
-        default: criticallyDampedSpring,
+    /**
+     * Default easing curve is a slightly shallower version of
+     * the default browser easing curve.
+     */
+    const ease = {
+        type: "keyframes",
+        ease: [0.25, 0.1, 0.35, 1],
+        duration: 0.3,
     };
     const getDefaultTransition = (valueKey, { keyframes }) => {
         if (keyframes.length > 2) {
             return keyframesTransition;
         }
-        else {
-            const factory = defaultTransitions[valueKey] || defaultTransitions.default;
-            return factory(keyframes[1]);
+        else if (transformProps.has(valueKey)) {
+            return valueKey.startsWith("scale")
+                ? criticallyDampedSpring(keyframes[1])
+                : underDampedSpring;
         }
+        return ease;
     };
 
     /**
@@ -7787,7 +7782,7 @@
                  * and warn against mismatches.
                  */
                 {
-                    warnOnce(nextValue.version === "9.0.7", `Attempting to mix Framer Motion versions ${nextValue.version} with 9.0.7 may not work as expected.`);
+                    warnOnce(nextValue.version === "9.1.0", `Attempting to mix Framer Motion versions ${nextValue.version} with 9.1.0 may not work as expected.`);
                 }
             }
             else if (isMotionValue(prevValue)) {