✨ Make About page stacking card scroll effect

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

src/components/molecules/ProcessStep.svelte

@@ -3,7 +3,6 @@
 </style>
 
 <script lang="ts">
-    import { lerp } from '$utils/functions'
     // Components
     import Image from '$components/atoms/Image.svelte'
 
@@ -11,29 +10,11 @@
     export let title: string
     export let text: string
     export let image: any = undefined
-    export let progress: number = 0
 
-    let stepEl: HTMLElement
-    let scrollY: number, innerWidth: number, innerHeight: number
     const imageRatio = image ? image.width / image.height : undefined
-    const scale = lerp(0.925, 1, progress)
-
-    $: isMobile = innerWidth < 550
-    $: offsetTop = stepEl && stepEl.offsetTop
-    $: offsetStagger = lerp(isMobile ? 16 : 48, isMobile ? 64 : 120, progress)
-    $: isPinned = scrollY - innerHeight * 1.4 >= offsetTop
 </script>
 
-<svelte:window bind:scrollY bind:innerWidth bind:innerHeight />
-
-<div bind:this={stepEl}
-    class="step"
-    class:is-pinned={isPinned}
-    style:--index={index}
-    style:--opacity-index={lerp(0.3, 0.05, progress)}
-    style:--scale={scale}
-    style:--offset-top="{offsetStagger}px"
->
+<div class="step" style:--index={index}>
     <div class="step__card grid">
         {#if image}
             <Image
@@ -48,11 +29,14 @@
                 alt={image.title}
             />
         {/if}
+
         <div class="content">
             <h3 class="title-medium">{title}</h3>
             <div class="text text-small">
                 {@html text}
             </div>
         </div>
+
+        <div class="overlay" />
     </div>
 </div>