From e1c577288ee374135fad5a8f115fbe971de18ab1 Mon Sep 17 00:00:00 2001
From: Nikolay Dorofeev <dorich2000@gmail.com>
Date: Sun, 9 Jul 2023 11:05:52 +0400
Subject: [PATCH] Replace GSAP MorphSVG with flubber

---
 components/d/character/Index.vue |  48 ++++++++++++---
 package-lock.json                | 101 +++++++++++++++++++++++++++++++
 package.json                     |   1 +
 utils/device.ts                  |   4 ++
 4 files changed, 145 insertions(+), 9 deletions(-)
 create mode 100644 utils/device.ts

diff --git a/components/d/character/Index.vue b/components/d/character/Index.vue
index 42de3a3..5554457 100644
--- a/components/d/character/Index.vue
+++ b/components/d/character/Index.vue
@@ -1,5 +1,6 @@
 <script lang="ts">
-import gsap from 'gsap'
+// @ts-ignore
+import { interpolate } from 'flubber'
 
 import idle from '../../../assets/img/character/idle.webp'
 import idleColor from '../../../assets/img/character/idle-color.webp'
@@ -37,6 +38,8 @@ const props = defineProps({
   }
 })
 
+const IS_LOW_PERFORMANCE = isLowPerformanceDevice()
+
 const assets = {
   idle,
   idleColor,
@@ -87,15 +90,40 @@ watch(
       action: shapeAction.value?.$el,
       profi: shapeProfi.value?.$el
     }
-    // TODO: Replace with flubber
-    if (false) {
-      gsap.fromTo(
-        shapeToAnimate.value?.$el,
-        { morphSVG: poseShapeMap[oldPose] },
-        { morphSVG: poseShapeMap[newPose], duration: 0.2 }
-      )
-    } else {
+    if (IS_LOW_PERFORMANCE) {
       useHref.value = `#${newPose}-shape`
+      return
+    }
+    const interpolator = interpolate(
+      poseShapeMap[oldPose]?.getAttribute('d') ?? '',
+      poseShapeMap[newPose]?.getAttribute('d') ?? '',
+      { maxSegmentLength: 100 }
+    )
+    console.log(interpolator)
+
+    const howFarAlongTheAnimationIsOnAScaleOfZeroToOne =
+      createTimeInterpolator(150)
+
+    requestAnimationFrame(draw)
+
+    function draw(time: number) {
+      const t = howFarAlongTheAnimationIsOnAScaleOfZeroToOne(time)
+      shapeToAnimate.value?.$el?.setAttribute('d', interpolator(t))
+      if (t < 1) {
+        requestAnimationFrame(draw)
+      }
+    }
+
+    function createTimeInterpolator(
+      duration: number,
+      easing: (t: number) => number = (t) => t
+    ) {
+      const start = performance.now()
+      return (time: number) => {
+        const elapsed = time - start
+        const t = elapsed / duration
+        return t > 1 ? 1 : easing(t)
+      }
     }
   }
 )
@@ -112,11 +140,13 @@ watch(
         </defs>
         <g v-if="!noShape">
           <component
+            v-show="!IS_LOW_PERFORMANCE"
             :is="initialSvgPath"
             ref="shapeToAnimate"
             :class="shapeClass"
           />
           <use
+            v-show="IS_LOW_PERFORMANCE"
             :class="shapeClass"
             :href="useHref"
           />
diff --git a/package-lock.json b/package-lock.json
index 504eead..1514d74 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,6 +13,7 @@
         "@nuxtjs/google-fonts": "^3.0.0-1",
         "@nuxtjs/tailwindcss": "^6.6.0",
         "@tailwindcss/typography": "^0.5.8",
+        "flubber": "^0.4.2",
         "gsap": "^3.12.2",
         "nuxt-icon": "^0.4.0"
       },
@@ -4554,6 +4555,16 @@
       "resolved": "https://registry.npmjs.org/cuint/-/cuint-0.2.2.tgz",
       "integrity": "sha512-d4ZVpCW31eWwCMe1YT3ur7mUDnTXbgwyzaL320DrcRT45rfjYxkt5QWLrmOJ+/UEAI2+fQgKe/fCjR8l4TpRgw=="
     },
+    "node_modules/d3-array": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-1.2.4.tgz",
+      "integrity": "sha512-KHW6M86R+FUPYGb3R5XiYjXPq7VzwxZ22buHhAEVG5ztoEcZZMLov530mmccaqA1GghZArjQV46fuc8kUqhhHw=="
+    },
+    "node_modules/d3-polygon": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/d3-polygon/-/d3-polygon-1.0.6.tgz",
+      "integrity": "sha512-k+RF7WvI08PC8reEoXa/w2nSg5AUMTi+peBD9cmFc+0ixHfbs4QmxxkarVal1IkVkgxVuk9JSHhJURHiyHKAuQ=="
+    },
     "node_modules/data-uri-to-buffer": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-4.0.1.tgz",
@@ -4884,6 +4895,11 @@
       "integrity": "sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==",
       "dev": true
     },
+    "node_modules/earcut": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/earcut/-/earcut-2.2.4.tgz",
+      "integrity": "sha512-/pjZsA1b4RPHbeWZQn66SWS8nZZWLQQ23oE3Eam7aroEFGEvwKAsJfZ9ytiEMycfzXWpca4FA9QIOehf7PocBQ=="
+    },
     "node_modules/editorconfig": {
       "version": "0.15.3",
       "resolved": "https://registry.npmjs.org/editorconfig/-/editorconfig-0.15.3.tgz",
@@ -6021,6 +6037,19 @@
       "integrity": "sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==",
       "dev": true
     },
+    "node_modules/flubber": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/flubber/-/flubber-0.4.2.tgz",
+      "integrity": "sha512-79RkJe3rA4nvRCVc2uXjj7U/BAUq84TS3KHn6c0Hr9K64vhj83ZNLUziNx4pJoBumSPhOl5VjH+Z0uhi+eE8Uw==",
+      "dependencies": {
+        "d3-array": "^1.2.0",
+        "d3-polygon": "^1.0.3",
+        "earcut": "^2.1.1",
+        "svg-path-properties": "^0.2.1",
+        "svgpath": "^2.2.1",
+        "topojson-client": "^3.0.0"
+      }
+    },
     "node_modules/follow-redirects": {
       "version": "1.15.2",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
@@ -11438,6 +11467,11 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/svg-path-properties": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/svg-path-properties/-/svg-path-properties-0.2.2.tgz",
+      "integrity": "sha512-GmrB+b6woz6CCdQe6w1GHs/1lt25l7SR5hmhF8jRdarpv/OgjLyuQygLu1makJapixeb1aQhP/Oa1iKi93o/aQ=="
+    },
     "node_modules/svg-tags": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/svg-tags/-/svg-tags-1.0.0.tgz",
@@ -11477,6 +11511,14 @@
         "node": ">= 10"
       }
     },
+    "node_modules/svgpath": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/svgpath/-/svgpath-2.6.0.tgz",
+      "integrity": "sha512-OIWR6bKzXvdXYyO4DK/UWa1VA1JeKq8E+0ug2DG98Y/vOmMpfZNj+TIG988HjfYSqtcy/hFOtZq/n/j5GSESNg==",
+      "funding": {
+        "url": "https://github.com/fontello/svg2ttf?sponsor=1"
+      }
+    },
     "node_modules/synckit": {
       "version": "0.8.5",
       "resolved": "https://registry.npmjs.org/synckit/-/synckit-0.8.5.tgz",
@@ -11873,6 +11915,19 @@
         "node": ">=0.6"
       }
     },
+    "node_modules/topojson-client": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/topojson-client/-/topojson-client-3.1.0.tgz",
+      "integrity": "sha512-605uxS6bcYxGXw9qi62XyrV6Q3xwbndjachmNxu8HWTtVPxZfEJN9fd/SZS1Q54Sn2y0TMyMxFj/cJINqGHrKw==",
+      "dependencies": {
+        "commander": "2"
+      },
+      "bin": {
+        "topo2geo": "bin/topo2geo",
+        "topomerge": "bin/topomerge",
+        "topoquantize": "bin/topoquantize"
+      }
+    },
     "node_modules/tr46": {
       "version": "0.0.3",
       "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
@@ -16317,6 +16372,16 @@
       "resolved": "https://registry.npmjs.org/cuint/-/cuint-0.2.2.tgz",
       "integrity": "sha512-d4ZVpCW31eWwCMe1YT3ur7mUDnTXbgwyzaL320DrcRT45rfjYxkt5QWLrmOJ+/UEAI2+fQgKe/fCjR8l4TpRgw=="
     },
+    "d3-array": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-1.2.4.tgz",
+      "integrity": "sha512-KHW6M86R+FUPYGb3R5XiYjXPq7VzwxZ22buHhAEVG5ztoEcZZMLov530mmccaqA1GghZArjQV46fuc8kUqhhHw=="
+    },
+    "d3-polygon": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/d3-polygon/-/d3-polygon-1.0.6.tgz",
+      "integrity": "sha512-k+RF7WvI08PC8reEoXa/w2nSg5AUMTi+peBD9cmFc+0ixHfbs4QmxxkarVal1IkVkgxVuk9JSHhJURHiyHKAuQ=="
+    },
     "data-uri-to-buffer": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-4.0.1.tgz",
@@ -16553,6 +16618,11 @@
       "integrity": "sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==",
       "dev": true
     },
+    "earcut": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/earcut/-/earcut-2.2.4.tgz",
+      "integrity": "sha512-/pjZsA1b4RPHbeWZQn66SWS8nZZWLQQ23oE3Eam7aroEFGEvwKAsJfZ9ytiEMycfzXWpca4FA9QIOehf7PocBQ=="
+    },
     "editorconfig": {
       "version": "0.15.3",
       "resolved": "https://registry.npmjs.org/editorconfig/-/editorconfig-0.15.3.tgz",
@@ -17384,6 +17454,19 @@
       "integrity": "sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==",
       "dev": true
     },
+    "flubber": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/flubber/-/flubber-0.4.2.tgz",
+      "integrity": "sha512-79RkJe3rA4nvRCVc2uXjj7U/BAUq84TS3KHn6c0Hr9K64vhj83ZNLUziNx4pJoBumSPhOl5VjH+Z0uhi+eE8Uw==",
+      "requires": {
+        "d3-array": "^1.2.0",
+        "d3-polygon": "^1.0.3",
+        "earcut": "^2.1.1",
+        "svg-path-properties": "^0.2.1",
+        "svgpath": "^2.2.1",
+        "topojson-client": "^3.0.0"
+      }
+    },
     "follow-redirects": {
       "version": "1.15.2",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
@@ -21281,6 +21364,11 @@
       "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
       "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w=="
     },
+    "svg-path-properties": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/svg-path-properties/-/svg-path-properties-0.2.2.tgz",
+      "integrity": "sha512-GmrB+b6woz6CCdQe6w1GHs/1lt25l7SR5hmhF8jRdarpv/OgjLyuQygLu1makJapixeb1aQhP/Oa1iKi93o/aQ=="
+    },
     "svg-tags": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/svg-tags/-/svg-tags-1.0.0.tgz",
@@ -21309,6 +21397,11 @@
         }
       }
     },
+    "svgpath": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/svgpath/-/svgpath-2.6.0.tgz",
+      "integrity": "sha512-OIWR6bKzXvdXYyO4DK/UWa1VA1JeKq8E+0ug2DG98Y/vOmMpfZNj+TIG988HjfYSqtcy/hFOtZq/n/j5GSESNg=="
+    },
     "synckit": {
       "version": "0.8.5",
       "resolved": "https://registry.npmjs.org/synckit/-/synckit-0.8.5.tgz",
@@ -21583,6 +21676,14 @@
       "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
       "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA=="
     },
+    "topojson-client": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/topojson-client/-/topojson-client-3.1.0.tgz",
+      "integrity": "sha512-605uxS6bcYxGXw9qi62XyrV6Q3xwbndjachmNxu8HWTtVPxZfEJN9fd/SZS1Q54Sn2y0TMyMxFj/cJINqGHrKw==",
+      "requires": {
+        "commander": "2"
+      }
+    },
     "tr46": {
       "version": "0.0.3",
       "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
diff --git a/package.json b/package.json
index 9104c8e..b08403c 100644
--- a/package.json
+++ b/package.json
@@ -56,6 +56,7 @@
     "@nuxtjs/google-fonts": "^3.0.0-1",
     "@nuxtjs/tailwindcss": "^6.6.0",
     "@tailwindcss/typography": "^0.5.8",
+    "flubber": "^0.4.2",
     "gsap": "^3.12.2",
     "nuxt-icon": "^0.4.0"
   }
diff --git a/utils/device.ts b/utils/device.ts
new file mode 100644
index 0000000..f5a93da
--- /dev/null
+++ b/utils/device.ts
@@ -0,0 +1,4 @@
+export function isLowPerformanceDevice() {
+  if (typeof window === 'undefined') return false
+  return window.matchMedia('(prefers-reduced-motion: reduce)').matches
+}