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
         }
     }
 }