Fix HSLA interpolation, add HSLA <-> RGBA animations

.yarnrc.yml

@@ -1,3 +1,3 @@
 nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-3.0.0-rc.6.cjs
+yarnPath: .yarn/releases/yarn-3.1.0.cjs

CHANGELOG.md

@@ -2,6 +2,16 @@
 
 Framer Motion adheres to [Semantic Versioning](http://semver.org/).
 
+## [5.2.0] Unreleased
+
+### Added
+
+-   Enable animation between hsla and rgba/hex.
+
+### Fixed
+
+-   Fixing HSLA color interpolation. [Issue](https://github.com/framer/motion/issues/1324)
+
 ## [5.1.0] 2021-11-02
 
 ### Added

package.json

@@ -1,6 +1,6 @@
 {
     "name": "framer-motion",
-    "version": "5.1.0-rc.1",
+    "version": "5.1.0",
     "description": "A simple and powerful React animation library",
     "main": "dist/framer-motion.cjs.js",
     "module": "dist/es/index.mjs",
@@ -113,7 +113,7 @@
     "dependencies": {
         "framesync": "6.0.1",
         "hey-listen": "^1.0.8",
-        "popmotion": "10.0.2",
+        "popmotion": "11.0.0",
         "style-value-types": "5.0.0",
         "tslib": "^2.1.0"
     },
@@ -136,15 +136,15 @@
     "bundlesize": [
         {
             "path": "./dist/framer-motion.js",
-            "maxSize": "34 kB"
+            "maxSize": "34.1 kB"
         },
         {
             "path": "./dist/size-rollup-m.js",
             "maxSize": "6.5 kB"
         },
         {
             "path": "./dist/size-rollup-dom-animation.js",
-            "maxSize": "17 kB"
+            "maxSize": "17.2 kB"
         },
         {
             "path": "./dist/size-rollup-dom-max.js",
@@ -160,7 +160,7 @@
         },
         {
             "path": "./dist/size-webpack-dom-max.js",
-            "maxSize": "30.3 kB"
+            "maxSize": "30.4 kB"
         }
     ]
 }

src/motion/__tests__/animate-prop.test.tsx

@@ -431,4 +431,104 @@ describe("animate prop as object", () => {
         )
         render(<Component />)
     })
+
+    test("Correctly animates from RGB to HSLA", async () => {
+        const element = await new Promise<HTMLDivElement>((resolve) => {
+            const Component = () => {
+                const ref = React.useRef<HTMLDivElement>(null)
+                return (
+                    <motion.div
+                        ref={ref}
+                        initial={{ backgroundColor: "rgb(0, 153, 255)" }}
+                        animate={{ backgroundColor: "hsl(345, 100%, 60%)" }}
+                        onAnimationComplete={() =>
+                            ref.current && resolve(ref.current)
+                        }
+                        transition={{ duration: 0.01 }}
+                    />
+                )
+            }
+            const { rerender } = render(<Component />)
+            rerender(<Component />)
+        })
+
+        return expect(element).toHaveStyle(
+            "background-color: rgba(255, 51, 102, 1)"
+        )
+    })
+
+    test("Correctly animates from HEX to HSLA", async () => {
+        const element = await new Promise<HTMLDivElement>((resolve) => {
+            const Component = () => {
+                const ref = React.useRef<HTMLDivElement>(null)
+                return (
+                    <motion.div
+                        ref={ref}
+                        initial={{ backgroundColor: "#0088ff" }}
+                        animate={{ backgroundColor: "hsl(345, 100%, 60%)" }}
+                        onAnimationComplete={() =>
+                            ref.current && resolve(ref.current)
+                        }
+                        transition={{ duration: 0.01 }}
+                    />
+                )
+            }
+            const { rerender } = render(<Component />)
+            rerender(<Component />)
+        })
+
+        return expect(element).toHaveStyle(
+            "background-color: rgba(255, 51, 102, 1)"
+        )
+    })
+
+    test("Correctly animates from HSLA to Hex", async () => {
+        const element = await new Promise<HTMLDivElement>((resolve) => {
+            const Component = () => {
+                const ref = React.useRef<HTMLDivElement>(null)
+                return (
+                    <motion.div
+                        ref={ref}
+                        initial={{ backgroundColor: "hsla(345, 100%, 60%, 1)" }}
+                        animate={{ backgroundColor: "#0088ff" }}
+                        onAnimationComplete={() =>
+                            ref.current && resolve(ref.current)
+                        }
+                        transition={{ duration: 0.01 }}
+                    />
+                )
+            }
+            const { rerender } = render(<Component />)
+            rerender(<Component />)
+        })
+
+        return expect(element).toHaveStyle(
+            "background-color: rgba(0, 136, 255, 1)"
+        )
+    })
+
+    test("Correctly animates from HSLA to RGB", async () => {
+        const element = await new Promise<HTMLDivElement>((resolve) => {
+            const Component = () => {
+                const ref = React.useRef<HTMLDivElement>(null)
+                return (
+                    <motion.div
+                        ref={ref}
+                        initial={{ backgroundColor: "hsla(345, 100%, 60%, 1)" }}
+                        animate={{ backgroundColor: "rgba(0, 136, 255, 1)" }}
+                        onAnimationComplete={() =>
+                            ref.current && resolve(ref.current)
+                        }
+                        transition={{ duration: 0.01 }}
+                    />
+                )
+            }
+            const { rerender } = render(<Component />)
+            rerender(<Component />)
+        })
+
+        return expect(element).toHaveStyle(
+            "background-color: rgba(0, 136, 255, 1)"
+        )
+    })
 })

yarn.lock

@@ -2,7 +2,7 @@
 # Manual changes might be lost - proceed with caution!
 
 __metadata:
-  version: 4
+  version: 5
   cacheKey: 8
 
 "@babel/code-frame@npm:7.10.4":
@@ -30,7 +30,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/core@npm:7.15.5, @babel/core@npm:^7.0.1, @babel/core@npm:^7.1.0":
+"@babel/core@npm:^7.0.1, @babel/core@npm:^7.1.0":
   version: 7.15.5
   resolution: "@babel/core@npm:7.15.5"
   dependencies:
@@ -5679,7 +5679,7 @@ __metadata:
     lint-staged: ^8.0.4
     lodash: ^4.17.13
     path-browserify: ^1.0.1
-    popmotion: 10.0.2
+    popmotion: 11.0.0
     prettier: ^2.1.0
     react: ^17.0.0-rc.0
     react-dev-utils: ^11.0.4
@@ -5792,25 +5792,26 @@ fsevents@^1.2.7:
     bindings: ^1.5.0
     nan: ^2.12.1
   checksum: ae855aa737aaa2f9167e9f70417cf6e45a5cd11918e1fee9923709a0149be52416d765433b4aeff56c789b1152e718cd1b13ddec6043b78cdda68260d86383c1
+  conditions: os=darwin
   languageName: node
   linkType: hard
 
 "fsevents@patch:fsevents@^1.2.7#~builtin<compat/fsevents>":
   version: 1.2.13
-  resolution: "fsevents@patch:fsevents@npm%3A1.2.13#~builtin<compat/fsevents>::version=1.2.13&hash=1cc4b2"
+  resolution: "fsevents@patch:fsevents@npm%3A1.2.13#~builtin<compat/fsevents>::version=1.2.13&hash=18f3a7"
   dependencies:
     bindings: ^1.5.0
     nan: ^2.12.1
-  checksum: b264407498db2cfdcc2a05287334a4160c985a88e4a989e2f2f8dcc6afc8b04a4fcd82c797266442452e11c1fb07d7747d138b078fe4bb1f8f4fd2a6f2484d7e
+  conditions: os=darwin
   languageName: node
   linkType: hard
 
 "fsevents@patch:fsevents@~2.3.2#~builtin<compat/fsevents>":
   version: 2.3.2
-  resolution: "fsevents@patch:fsevents@npm%3A2.3.2#~builtin<compat/fsevents>::version=2.3.2&hash=1cc4b2"
+  resolution: "fsevents@patch:fsevents@npm%3A2.3.2#~builtin<compat/fsevents>::version=2.3.2&hash=18f3a7"
   dependencies:
     node-gyp: latest
-  checksum: 78db9daf1f6526a49cefee3917cc988f62dc7f25b5dd80ad6de4ffc4af7f0cab7491ac737626ff53e482a111bc53aac9e411fe3602458eca36f6a003ecf69c16
+  conditions: os=darwin
   languageName: node
   linkType: hard
 
@@ -5820,6 +5821,7 @@ fsevents@~2.3.2:
   dependencies:
     node-gyp: latest
   checksum: 97ade64e75091afee5265e6956cb72ba34db7819b4c3e94c431d4be2b19b8bb7a2d4116da417950c3425f17c8fe693d25e20212cac583ac1521ad066b77ae31f
+  conditions: os=darwin
   languageName: node
   linkType: hard
 
@@ -7567,7 +7569,7 @@ fsevents@~2.3.2:
   languageName: node
   linkType: hard
 
-"jest-resolve@npm:24.9.0, jest-resolve@npm:^24.9.0":
+"jest-resolve@npm:^24.9.0":
   version: 24.9.0
   resolution: "jest-resolve@npm:24.9.0"
   dependencies:
@@ -8181,7 +8183,7 @@ fsevents@~2.3.2:
   languageName: node
   linkType: hard
 
-"listr@npm:0.14.3, listr@npm:^0.14.2":
+"listr@npm:^0.14.2":
   version: 0.14.3
   resolution: "listr@npm:0.14.3"
   dependencies:
@@ -9800,15 +9802,15 @@ fsevents@~2.3.2:
   languageName: node
   linkType: hard
 
-"popmotion@npm:10.0.2":
-  version: 10.0.2
-  resolution: "popmotion@npm:10.0.2"
+"popmotion@npm:11.0.0":
+  version: 11.0.0
+  resolution: "popmotion@npm:11.0.0"
   dependencies:
     framesync: ^6.0.1
     hey-listen: ^1.0.8
     style-value-types: 5.0.0
     tslib: ^2.1.0
-  checksum: 6c793f637a5dd9861edca257eac523c2d6c1d895399e9320562c26c2f2a2d1288af1892925af5bc88e091e0444b4478f352772b7d1a5ba1b972cd889d1560d4a
+  checksum: 0e214895269bb3c9d2c5cbed2229d399cdea118f40cfd95f96b176439edf09d16becdef3dc3b820a6f53ab02a14e6047f04c89ee6991ddbd8b8194d7cfa59f0b
   languageName: node
   linkType: hard
 
@@ -10664,28 +10666,28 @@ resolve@^2.0.0-next.3:
 
 "resolve@patch:resolve@1.1.7#~builtin<compat/resolve>":
   version: 1.1.7
-  resolution: "resolve@patch:resolve@npm%3A1.1.7#~builtin<compat/resolve>::version=1.1.7&hash=00b1ff"
-  checksum: 3477c7e1cb7c0588764f1c2dbdd84d1f4e98d0ad138485ff280c210ddc252c86735f9e6113cbe9491e24cf3205058fce8a7a1dd1f50370707656dbd895bd3826
+  resolution: "resolve@patch:resolve@npm%3A1.1.7#~builtin<compat/resolve>::version=1.1.7&hash=07638b"
+  checksum: e9dbca78600ae56835c43a09f1276876c883e4b4bbd43e2683fa140671519d2bdebeb1c1576ca87c8c508ae2987b3ec481645ac5d3054b0f23254cfc1ce49942
   languageName: node
   linkType: hard
 
 "resolve@patch:resolve@1.x#~builtin<compat/resolve>, resolve@patch:resolve@^1.10.0#~builtin<compat/resolve>, resolve@patch:resolve@^1.14.2#~builtin<compat/resolve>, resolve@patch:resolve@^1.17.0#~builtin<compat/resolve>, resolve@patch:resolve@^1.20.0#~builtin<compat/resolve>, resolve@patch:resolve@^1.9.0#~builtin<compat/resolve>":
   version: 1.20.0
-  resolution: "resolve@patch:resolve@npm%3A1.20.0#~builtin<compat/resolve>::version=1.20.0&hash=00b1ff"
+  resolution: "resolve@patch:resolve@npm%3A1.20.0#~builtin<compat/resolve>::version=1.20.0&hash=07638b"
   dependencies:
     is-core-module: ^2.2.0
     path-parse: ^1.0.6
-  checksum: bed00be983cd20a8af0e7840664f655c4b269786dbd9595c5f156cd9d8a0050e65cdbbbdafc30ee9b6245b230c78a2c8ab6447a52545b582f476c29adb188cc5
+  checksum: a0dd7d16a8e47af23afa9386df2dff10e3e0debb2c7299a42e581d9d9b04d7ad5d2c53f24f1e043f7b3c250cbdc71150063e53d0b6559683d37f790b7c8c3cd5
   languageName: node
   linkType: hard
 
 "resolve@patch:resolve@^2.0.0-next.3#~builtin<compat/resolve>":
   version: 2.0.0-next.3
-  resolution: "resolve@patch:resolve@npm%3A2.0.0-next.3#~builtin<compat/resolve>::version=2.0.0-next.3&hash=00b1ff"
+  resolution: "resolve@patch:resolve@npm%3A2.0.0-next.3#~builtin<compat/resolve>::version=2.0.0-next.3&hash=07638b"
   dependencies:
     is-core-module: ^2.2.0
     path-parse: ^1.0.6
-  checksum: eb88c5e53843bc022215744307a5f5664446c0fdb8f43c33456dce98d5ee6b3162d0cd0a177bb6f1c3d5c8bf01391ac7ab2de0e936e35318725fb40ba7efdaf6
+  checksum: 21684b4d99a4877337cdbd5484311c811b3e8910edb5d868eec85c6e6550b0f570d911f9a384f9e176172d6713f2715bd0b0887fa512cb8c6aeece018de6a9f8
   languageName: node
   linkType: hard
 
@@ -12415,11 +12417,11 @@ typescript@^4.2.3:
 
 "typescript@patch:typescript@^4.2.3#~builtin<compat/typescript>":
   version: 4.4.3
-  resolution: "typescript@patch:typescript@npm%3A4.4.3#~builtin<compat/typescript>::version=4.4.3&hash=d8b4e7"
+  resolution: "typescript@patch:typescript@npm%3A4.4.3#~builtin<compat/typescript>::version=4.4.3&hash=ddd1e8"
   bin:
     tsc: bin/tsc
     tsserver: bin/tsserver
-  checksum: 215a59742afb7e0c3668e2c50ca19813deb24b3cc0d16ac3591990e033728050aaa99e159a72b54cb43653f16c778a5cf9dfeed1f51c3b105710ae082c064af7
+  checksum: 79f5c13d21c9dea3eb44d2b7002ff25a0569fefc432e083d65a360e3aca990aca25fc733e14aa6883b5e9a68e3e2f0330a34123e048806f91d701732ece00e6f
   languageName: node
   linkType: hard