framer-motion 5.1.0 → 5.2.0

package/dist/framer-motion.dev.js

@@ -929,6 +929,46 @@
             return functions ? functions.map(applyDefaultFilter).join(' ') : v;
         } });
 
+    function hueToRgb(p, q, t) {
+        if (t < 0)
+            t += 1;
+        if (t > 1)
+            t -= 1;
+        if (t < 1 / 6)
+            return p + (q - p) * 6 * t;
+        if (t < 1 / 2)
+            return q;
+        if (t < 2 / 3)
+            return p + (q - p) * (2 / 3 - t) * 6;
+        return p;
+    }
+    function hslaToRgba({ hue, saturation, lightness, alpha }) {
+        hue /= 360;
+        saturation /= 100;
+        lightness /= 100;
+        let red = 0;
+        let green = 0;
+        let blue = 0;
+        if (!saturation) {
+            red = green = blue = lightness;
+        }
+        else {
+            const q = lightness < 0.5
+                ? lightness * (1 + saturation)
+                : lightness + saturation - lightness * saturation;
+            const p = 2 * lightness - q;
+            red = hueToRgb(p, q, hue + 1 / 3);
+            green = hueToRgb(p, q, hue);
+            blue = hueToRgb(p, q, hue - 1 / 3);
+        }
+        return {
+            red: Math.round(red * 255),
+            green: Math.round(green * 255),
+            blue: Math.round(blue * 255),
+            alpha,
+        };
+    }
+
     const mixLinearColor = (from, to, v) => {
         const fromExpo = from * from;
         const toExpo = to * to;
@@ -938,24 +978,25 @@
     const getColorType = (v) => colorTypes.find((type) => type.test(v));
     const notAnimatable = (color) => `'${color}' is not an animatable color. Use the equivalent color code instead.`;
     const mixColor = (from, to) => {
-        const fromColorType = getColorType(from);
-        const toColorType = getColorType(to);
+        let fromColorType = getColorType(from);
+        let toColorType = getColorType(to);
         invariant(!!fromColorType, notAnimatable(from));
         invariant(!!toColorType, notAnimatable(to));
-        invariant(fromColorType.transform === toColorType.transform, "Both colors must be hex/RGBA, OR both must be HSLA.");
-        if (!fromColorType ||
-            !toColorType ||
-            fromColorType.transform !== toColorType.transform) {
-            return (p) => `${p > 0 ? to : from}`;
-        }
-        const fromColor = fromColorType.parse(from);
-        const toColor = toColorType.parse(to);
+        let fromColor = fromColorType.parse(from);
+        let toColor = toColorType.parse(to);
+        if (fromColorType === hsla) {
+            fromColor = hslaToRgba(fromColor);
+            fromColorType = rgba;
+        }
+        if (toColorType === hsla) {
+            toColor = hslaToRgba(toColor);
+            toColorType = rgba;
+        }
         const blended = Object.assign({}, fromColor);
-        const mixFunc = fromColorType === hsla ? mix : mixLinearColor;
         return (v) => {
             for (const key in blended) {
                 if (key !== "alpha") {
-                    blended[key] = mixFunc(fromColor[key], toColor[key], v);
+                    blended[key] = mixLinearColor(fromColor[key], toColor[key], v);
                 }
             }
             blended.alpha = mix(fromColor.alpha, toColor.alpha, v);