✨ Make About page stacking card scroll effect

Using Motion One example, thanks to https://codepen.io/bramus/pen/rNdzpZK (by Bramus)

src/routes/about.svelte

@@ -5,6 +5,7 @@
 <script lang="ts">
     import { onMount, afterUpdate } from 'svelte'
     import { map } from '$utils/functions'
+    import { scroll, animate, type ScrollOptions } from 'motion'
     // Components
     import Metas from '$components/Metas.svelte'
     import PageTransition from '$components/PageTransition.svelte'
@@ -21,17 +22,16 @@
     // console.log(data)
 
     let scrollY: number, innerWidth: number, innerHeight: number
+    let stepsEl: HTMLElement
     let photosGridEl: HTMLElement
     let photosGridOffset: number = photosGridEl && photosGridEl.offsetTop
     let sectionsObserver: IntersectionObserver
-    // let stepsObserver: IntersectionObserver
 
     $: parallaxPhotos = photosGridEl && map(scrollY, photosGridOffset - innerHeight, photosGridOffset + innerHeight / 1.5, 0, innerHeight * 0.15, true)
     $: fadedPhotosIndexes = innerWidth > 768
         ? [0, 2, 5, 7, 9, 12, 17, 20, 22, 26, 30, 32, 34]
         : [0]
 
-
     onMount(() => {
         // Sections observer
         sectionsObserver = new IntersectionObserver(([{ isIntersecting, target }]: [IntersectionObserverEntry] & [{ target: HTMLElement }]) => {
@@ -50,21 +50,34 @@
         sections.forEach(section => sectionsObserver.observe(section))
 
 
-        // Steps observer
-        // stepsObserver = new IntersectionObserver(([{ intersectionRatio, target }]) => {
-        //     target.classList.toggle('is-pinned', intersectionRatio < 1)
-        // }, {
-        //     threshold: 1,
-        //     rootMargin: '-10% 0px 50%',
-        // })
-        // const steps = document.querySelectorAll('.about__process .steps > *')
-        // steps.forEach(step => stepsObserver.observe(step))
+        // Steps scroll animation
+        const cards = stepsEl.querySelectorAll('.step')
+        const cardsAmount = data.process_steps.length
+
+        cards.forEach((card: HTMLElement, i: number) => {
+            const index = i + 1
+            const reverseIndex = cardsAmount - index
+            const overlay = card.querySelector('.overlay')
+            const scrollOptions: ScrollOptions = {
+                target: stepsEl,
+                offset: [`${i / cardsAmount * 100}%`, `${index / cardsAmount * 100}%`],
+            }
+
+            // Card scale
+            scroll(animate(card, {
+                scale: [1, 1 - (0.02 * reverseIndex)]
+            }), scrollOptions)
+
+            // Overlay opacity
+            scroll(animate(overlay, {
+                opacity: [0, 0.2 + (0.05 * reverseIndex)]
+            }), scrollOptions)
+        })
 
 
         // Destroy
         return () => {
-            // sectionsObserver && sectionsObserver.disconnect()
-            // stepsObserver && stepsObserver.disconnect()
+            sectionsObserver && sectionsObserver.disconnect()
         }
     })
 
@@ -106,16 +119,15 @@
                 <p class="text-normal">{data.process_subtitle}</p>
             </div>
 
-            <div class="steps">
-                {#each data.process_steps as { title, text, image }, index}
-                    <ProcessStep index={index + 1}
-                        {title} {text} {image}
-                        progress={index / (data.process_steps.length - 1) * 1}
-                    />
+            <div class="steps" bind:this={stepsEl}
+                style:--cards-amount={data.process_steps.length}
+            >
+                {#each data.process_steps as step, index}
+                    <ProcessStep {...step} index={index} />
                 {/each}
             </div>
 
-            <div class="intention" style:--offset-top="120px">
+            <div class="intention">
                 <p class="intention__content title-medium">
                     {data.process_intention}
                 </p>