Globe: Use Svelte transition using Motion to reveal current location Split text

src/animations/transitions.ts

@@ -1,13 +1,18 @@
-import { animate } from 'motion'
+import { animate, stagger } from 'motion'
+import type { TransitionConfig } from 'svelte/transition'
 import { quartOut } from './easings'
 
+
+/**
+ * Scale and fade
+ */
 export const scaleFade = (node: HTMLElement, {
-    delay = 0,
-    duration = 1,
     scale = [0.7, 1],
     opacity = [1, 0],
     x = null,
-}) => {
+    delay = 0,
+    duration = 1,
+}): TransitionConfig => {
     return {
         css: () => {
             animate(node, {
@@ -20,6 +25,36 @@ export const scaleFade = (node: HTMLElement, {
                 duration,
                 delay,
             })
+
+            return null
+        }
+    }
+}
+
+
+/**
+ * Scale and fade split text
+ */
+export const revealSplit = (node: HTMLElement, {
+    opacity = [0, 1],
+    y = ['110%', '0%'],
+    children = '.char',
+    duration = 1,
+    delay = 0,
+}): TransitionConfig => {
+    return {
+        css: () => {
+            animate(node.querySelectorAll(children), {
+                opacity,
+                y,
+                z: 0,
+            }, {
+                easing: quartOut,
+                duration,
+                delay: stagger(0.04, { start: delay }),
+            })
+
+            return null
         }
     }
 }

src/components/organisms/InteractiveGlobe.svelte

@@ -8,7 +8,7 @@
     import { quartOut } from 'svelte/easing'
     import { Globe, type Marker } from '$modules/globe'
     import { getRandomItem, debounce } from '$utils/functions'
-    import reveal from '$animations/reveal'
+    import { revealSplit } from '$animations/transitions'
     // Components
     import SplitText from '$components/SplitText.svelte'
 
@@ -145,16 +145,8 @@
 
     {#if hoveredMarker}
         <div class="globe__location"
-            transition:fade={{ duration: 300, easing: quartOut }}
+            in:revealSplit={{ duration: 1 }}
-            use:reveal={{
+            out:fade={{ duration: 300, easing: quartOut }}
-                children: '.char',
-                animation: { y: ['110%', 0] },
-                options: {
-                    stagger: 0.04,
-                    duration: 0.85,
-                    threshold: 0,
-                },
-            }}
         >
             <SplitText text={hoveredMarker.name} mode="chars" class="name" />
             <p class="country" in:flySvelte={{ y: 16, duration: 800, easing: quartOut, delay: 700 }}>