[wip] Update About page with Stack of cards for Steps

src/routes/about.svelte

@@ -4,7 +4,7 @@
 
 <script lang="ts">
     import { onMount, afterUpdate } from 'svelte'
-    import { map } from '$utils/functions'
+    import { map, lerp } from '$utils/functions'
     // Components
     import Metas from '$components/Metas.svelte'
     import PageTransition from '$components/PageTransition.svelte'
@@ -24,7 +24,9 @@
     let photosGridEl: HTMLElement
     let photosGridOffset: number = photosGridEl && photosGridEl.offsetTop
     let sectionsObserver: IntersectionObserver
+    let stepsObserver: IntersectionObserver
 
+    $: isMobile = innerWidth < 550
     $: 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]
@@ -33,29 +35,43 @@
 
     onMount(() => {
         // Sections observer
-        sectionsObserver = new IntersectionObserver(entries => {
-            entries.forEach(({ isIntersecting, target }: { target: HTMLElement } & IntersectionObserverEntry) => {
-                target.classList.toggle('is-visible', isIntersecting)
+        sectionsObserver = new IntersectionObserver(([{ isIntersecting, target }]: [IntersectionObserverEntry] & [{ target: HTMLElement }]) => {
+            target.classList.toggle('is-visible', isIntersecting)
 
-                // Run effect once
-                if (isIntersecting && target.dataset.stay) {
-                    sectionsObserver.unobserve(target)
-                }
-            })
+            // Run effect once
+            if (isIntersecting && target.dataset.stay) {
+                sectionsObserver.unobserve(target)
+            }
         }, {
-            threshold: 0.3,
+            threshold: 0.5,
             rootMargin: '0% 0px 0%'
         })
 
         const sections = document.querySelectorAll('.about [data-part]')
         sections.forEach(section => sectionsObserver.observe(section))
 
+
+        // Steps observer
+        stepsObserver = new IntersectionObserver(entries => {
+            entries.forEach(({ intersectionRatio, target }: IntersectionObserverEntry) => {
+                target.classList.toggle('is-pinned', intersectionRatio < 1)
+            })
+        }, {
+            threshold: 1,
+            rootMargin: '-10% 0px 75%',
+        })
+        const steps = document.querySelectorAll('.about__process .step.is-stacked')
+        steps.forEach(step => stepsObserver.observe(step))
+
+
         // Destroy
         return () => {
             sectionsObserver && sectionsObserver.disconnect()
+            stepsObserver && stepsObserver.disconnect()
         }
     })
 
+
     afterUpdate(() => {
         // Update photos grid top offset
         photosGridOffset = photosGridEl.offsetTop
@@ -87,38 +103,46 @@
     </section>
 
     <section class="about__process">
-        <div class="title">
-            <h2 class="title-big">{data.process_title}</h2>
-            <p class="text-normal">{data.process_subtitle}</p>
-        </div>
+        <div class="container grid">
+            <div class="title">
+                <h2 class="title-big">{data.process_title}</h2>
+                <p class="text-normal">{data.process_subtitle}</p>
+            </div>
 
-        <div class="steps container-wide">
-            {#each data.process_steps as { title, text, image }}
-                {@const imageRatio = image ? image.width / image.height : undefined}
-                <div class="step" data-part data-stay="true">
-                    {#if image}
-                        <Image
-                            class="image shadow-box-dark"
-                            id={image.id}
-                            sizeKey="photo-grid"
-                            sizes={{
-                                small: { width: 400 },
-                                medium: { width: 600 },
-                            }}
-                            ratio={imageRatio}
-                            alt={image.title}
-                        />
-                    {/if}
-                    <div class="step__content">
-                        <h3 class="text-label">{title}</h3>
-                        <div class="text">
-                            {@html text}
+            <div class="steps">
+                {#each data.process_steps as { title, text, image }, index}
+                    {@const imageRatio = image ? image.width / image.height : undefined}
+                    {@const indexProgress = index / (data.process_steps.length - 1) * 1}
+                    <div class="step grid is-stacked"
+                        style:--opacity-index={lerp(0.3, 0.05, indexProgress)}
+                        style:--scale={lerp(0.925, 1, indexProgress)}
+                        style:--offset-top="{lerp(isMobile ? 16 : 48, isMobile ? 64 : 120, indexProgress)}px"
+                    >
+                        {#if image}
+                            <Image
+                                class="image shadow-box-dark"
+                                id={image.id}
+                                sizeKey="photo-grid"
+                                sizes={{
+                                    small: { width: 400 },
+                                    medium: { width: 600 },
+                                }}
+                                ratio={imageRatio}
+                                alt={image.title}
+                            />
+                        {/if}
+                        <div class="step__text">
+                            <h3 class="title-medium">{title}</h3>
+                            <div class="text text-small">
+                                {@html text}
+                            </div>
                         </div>
                     </div>
-                </div>
-            {/each}
-            <div class="step intention" data-part data-stay="true">
-                <p class="intention__text title-medium">
+                {/each}
+            </div>
+
+            <div class="step step--intention" style:--offset-top="120px">
+                <p class="step--intention__text title-medium">
                     {data.process_intention}
                 </p>
             </div>

src/routes/about.ts

@@ -78,8 +78,6 @@ export async function GET ({}: RequestEvent): Promise<RequestHandlerOutput> {
 
         const { data: { photo: photos }} = photosRes
 
-        console.log(about)
-
         return {
             body: {
                 data: about,