refactor: rethink ProcessStep transition + use tick in transitions

apps/website/src/animations/transitions.ts

@@ -9,24 +9,25 @@ import { quartOut } from './easings'
 export const scaleFade = (node: HTMLElement, {
     scale = [0.7, 1],
     opacity = [1, 0],
-    x = null,
+    x = [0, 0],
     delay = 0,
-    duration = 1,
+    duration = 0.75,
 }): TransitionConfig => {
-    return {
-        css: () => {
-            animate(node, {
-                scale,
-                opacity,
-                x,
-                z: 0,
-            }, {
-                easing: quartOut,
-                duration,
-                delay,
-            })
+    const anim = animate(node, {
+        scale,
+        opacity,
+        x,
+        z: 0,
+    }, {
+        easing: quartOut,
+        duration,
+        delay,
+    })
 
-            return null
+    return {
+        duration: anim.duration * 1000,
+        tick: (t) => {
+            anim.currentTime = t
         }
     }
 }
@@ -42,19 +43,20 @@ export const revealSplit = (node: HTMLElement, {
     duration = 1,
     delay = 0,
 }): TransitionConfig => {
-    return {
-        css: () => {
-            animate(node.querySelectorAll(children), {
-                opacity,
-                y,
-                z: 0,
-            }, {
-                easing: quartOut,
-                duration,
-                delay: stagger(0.04, { start: delay }),
-            })
+    const anim = animate(node.querySelectorAll(children), {
+        opacity,
+        y,
+        z: 0,
+    }, {
+        easing: quartOut,
+        duration,
+        delay: stagger(0.04, { start: delay }),
+    })
 
-            return null
+    return {
+        duration: anim.duration * 1000,
+        tick: (t) => {
+            anim.currentTime = t
         }
     }
 }

apps/website/src/components/molecules/ProcessStep/ProcessStep.svelte

@@ -3,18 +3,18 @@
 </style>
 
 <script lang="ts">
+    import { scale } from 'svelte/transition'
+    import { quartOut } from 'svelte/easing'
     import { scaleFade } from '$animations/transitions'
     // Components
     import Image from '$components/atoms/Image.svelte'
     import { getAssetUrlKey } from '$utils/api'
 
     let {
-        index,
         text,
         image,
         video,
     }: {
-        index: number
         text: string
         image?: any
         video?: any
@@ -25,9 +25,8 @@
 
 <div
     class="step grid"
-    style:--index={index}
     in:scaleFade|local={{ scale: [1.1, 1], opacity: [0, 1], x: [20, 0], delay: 0.2 }}
-    out:scaleFade|local={{ scale: [1, 0.9], opacity: [1, 0], x: [0, -20] }}
+    out:scale={{ start: 0.9, duration: 750, easing: quartOut }}
 >
     {#if image || video}
         <div class="media">

apps/website/src/routes/(site)/about/+page.svelte

@@ -26,7 +26,8 @@
     let innerWidth = $state<number>()
     let photosGridEl: HTMLElement
     let photosGridParallax = $state<number>()
-    let currentStep = $state(0)
+    let currentStepIndex = $state(0)
+    const currentStep = $derived(data.about.process_steps[currentStepIndex])
     let emailCopied = $state<string>()
     let emailCopiedTimeout: ReturnType<typeof setTimeout> | number
 
@@ -312,13 +313,13 @@
 
                 <ol>
                     {#each data.about.process_steps as { title }, index}
-                        <li class:is-active={index === currentStep}>
+                        <li class:is-active={index === currentStepIndex}>
                             <a
                                 class="title-big"
                                 href="#step-{index + 1}"
                                 onclick={(event) => {
                                     event.preventDefault()
-                                    currentStep = index
+                                    currentStepIndex = index
                                     sendEvent('aboutStepSwitch')
                                 }}
                             >
@@ -330,18 +331,16 @@
             </aside>
 
             <div class="steps">
-                {#each data.about.process_steps as { text, image, video_mp4, video_webm }, index}
-                    {#if index === currentStep}
-                        <ProcessStep
-                            {index} {text}
-                            image={image ?? undefined}
-                            video={{
-                                mp4: video_mp4?.id,
-                                webm: video_webm?.id
-                            }}
-                        />
-                    {/if}
-                {/each}
+                {#key currentStep}
+                    <ProcessStep
+                        text={currentStep.text}
+                        image={currentStep.image}
+                        video={{
+                            mp4: currentStep.video_mp4?.id,
+                            webm: currentStep.video_webm?.id
+                        }}
+                    />
+                {/key}
             </div>
         </div>
     </section>