Simple transition without morph

components/d/character/Index.vue

@@ -1,7 +1,4 @@
 <script lang="ts">
-// @ts-ignore
-import { interpolate } from 'flubber'
-
 import idle from '../../../assets/img/character/idle.webp'
 import idleColor from '../../../assets/img/character/idle-color.webp'
 import idleOutline from '../../../assets/img/character/idle-outline.webp'
@@ -14,6 +11,7 @@ import profi from '../../../assets/img/character/profi.webp'
 import profiColor from '../../../assets/img/character/profi-color.webp'
 import profiOutline from '../../../assets/img/character/profi-outline.webp'
 import profiOutlineColor from '../../../assets/img/character/profi-outline-color.webp'
+import type { CSSProperties } from 'vue'
 
 export type CharacterPose = 'idle' | 'action' | 'profi'
 
@@ -38,8 +36,6 @@ const props = defineProps({
   }
 })
 
-const IS_LOW_PERFORMANCE = isLowPerformanceDevice()
-
 const assets = {
   idle,
   idleColor,
@@ -61,71 +57,19 @@ function getAsset(pose: CharacterPose) {
   ]
 }
 
-let initialSvgPath: ReturnType<typeof resolveComponent>
 const useHref = ref(`#${props.pose}-shape`)
-
-switch (props.pose) {
-  case 'idle':
-    initialSvgPath = resolveComponent('DCharacterShapeIdle')
-    break
-  case 'profi':
-    initialSvgPath = resolveComponent('DCharacterShapeProfi')
-    break
-  case 'action':
-    initialSvgPath = resolveComponent('DCharacterShapeAction')
-    break
-}
-
-const shapeToAnimate = ref<ComponentPublicInstance | null>(null)
-const shapeIdle = ref<ComponentPublicInstance | null>(null)
-const shapeAction = ref<ComponentPublicInstance | null>(null)
-const shapeProfi = ref<ComponentPublicInstance | null>(null)
+const useStyle = reactive<CSSProperties>({})
 
 watch(
   () => props.pose,
-  (newPose, oldPose) => {
+  async (newPose, oldPose) => {
     if (props.noShape) return
-    const poseShapeMap: Record<CharacterPose, SVGPathElement> = {
-      idle: shapeIdle.value?.$el,
-      action: shapeAction.value?.$el,
-      profi: shapeProfi.value?.$el
-    }
-    if (IS_LOW_PERFORMANCE) {
-      useHref.value = `#${newPose}-shape`
-      return
-    }
-    const interpolator = useCache(`character:morph:${oldPose}-${newPose}`, () => {
-      return interpolate(
-        poseShapeMap[oldPose]?.getAttribute('d') ?? '',
-        poseShapeMap[newPose]?.getAttribute('d') ?? '',
-        { maxSegmentLength: 30 }
-      )
-    })
-
-    const howFarAlongTheAnimationIsOnAScaleOfZeroToOne =
-      createTimeInterpolator(200)
-
-    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)
-      }
-    }
+    useStyle.transform = 'scale(0.5)'
+    useStyle.filter = 'blur(10px)'
+    await new Promise(resolve => setTimeout(resolve, 150))
+    useHref.value = `#${newPose}-shape`
+    useStyle.transform = undefined
+    useStyle.filter = undefined
   }
 )
 </script>
@@ -135,21 +79,17 @@ watch(
     <div class="relative isolate w-full h-full">
       <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
         <defs v-if="!noShape">
-          <DCharacterShapeIdle id="idle-shape" ref="shapeIdle" />
-          <DCharacterShapeAction id="action-shape" ref="shapeAction" />
-          <DCharacterShapeProfi id="profi-shape" ref="shapeProfi" />
+          <DCharacterShapeIdle id="idle-shape" />
+          <DCharacterShapeAction id="action-shape" />
+          <DCharacterShapeProfi id="profi-shape" />
         </defs>
         <g v-if="!noShape">
-          <component
-            v-show="!IS_LOW_PERFORMANCE"
-            :is="initialSvgPath"
-            ref="shapeToAnimate"
-            :class="shapeClass"
-          />
           <use
-            v-show="IS_LOW_PERFORMANCE"
+            class="transition-all"
+            :style="useStyle"
             :class="shapeClass"
             :href="useHref"
+            transform-origin="512 512"
           />
         </g>
       </svg>

package.json

@@ -56,7 +56,6 @@
     "@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"
   }