[wip] Make About page Process step a component

Also an attempt to manage the stacking effect of the steps but still not good 🙃 tricky shit

src/components/molecules/ProcessStep.svelte

@@ -0,0 +1,58 @@
+<style lang="scss">
+    @import "../../style/molecules/process-step";
+</style>
+
+<script lang="ts">
+    import { lerp } from '$utils/functions'
+    // Components
+    import Image from '$components/atoms/Image.svelte'
+
+    export let index: number
+    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__card grid">
+        {#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="content">
+            <h3 class="title-medium">{title}</h3>
+            <div class="text text-small">
+                {@html text}
+            </div>
+        </div>
+    </div>
+</div>

src/routes/about.svelte

@@ -4,14 +4,14 @@
 
 <script lang="ts">
     import { onMount, afterUpdate } from 'svelte'
-    import { map, lerp } from '$utils/functions'
+    import { map } from '$utils/functions'
     // Components
     import Metas from '$components/Metas.svelte'
     import PageTransition from '$components/PageTransition.svelte'
     import AboutGridPhoto from '$components/atoms/AboutGridPhoto.svelte'
-    import Image from '$components/atoms/Image.svelte'
     import Button from '$components/atoms/Button.svelte'
     import Heading from '$components/molecules/Heading.svelte'
+    import ProcessStep from '$components/molecules/ProcessStep.svelte'
     import ShopModule from '$components/organisms/ShopModule.svelte'
     import NewsletterModule from '$components/organisms/NewsletterModule.svelte'
 
@@ -24,9 +24,8 @@
     let photosGridEl: HTMLElement
     let photosGridOffset: number = photosGridEl && photosGridEl.offsetTop
     let sectionsObserver: IntersectionObserver
-    let stepsObserver: 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]
@@ -52,22 +51,20 @@
 
 
         // Steps observer
-        stepsObserver = new IntersectionObserver(entries => {
+        // stepsObserver = new IntersectionObserver(([{ intersectionRatio, target }]) => {
-            entries.forEach(({ intersectionRatio, target }: IntersectionObserverEntry) => {
+        //     target.classList.toggle('is-pinned', intersectionRatio < 1)
-                target.classList.toggle('is-pinned', intersectionRatio < 1)
+        // }, {
-            })
+        //     threshold: 1,
-        }, {
+        //     rootMargin: '-10% 0px 50%',
-            threshold: 1,
+        // })
-            rootMargin: '-10% 0px 75%',
+        // const steps = document.querySelectorAll('.about__process .steps > *')
-        })
+        // steps.forEach(step => stepsObserver.observe(step))
-        const steps = document.querySelectorAll('.about__process .step.is-stacked')
-        steps.forEach(step => stepsObserver.observe(step))
 
 
         // Destroy
         return () => {
-            sectionsObserver && sectionsObserver.disconnect()
+            // sectionsObserver && sectionsObserver.disconnect()
-            stepsObserver && stepsObserver.disconnect()
+            // stepsObserver && stepsObserver.disconnect()
         }
     })
 
@@ -111,38 +108,15 @@
 
             <div class="steps">
                 {#each data.process_steps as { title, text, image }, index}
-                    {@const imageRatio = image ? image.width / image.height : undefined}
+                    <ProcessStep index={index + 1}
-                    {@const indexProgress = index / (data.process_steps.length - 1) * 1}
+                        {title} {text} {image}
-                    <div class="step grid is-stacked"
+                        progress={index / (data.process_steps.length - 1) * 1}
-                        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>
                 {/each}
             </div>
 
-            <div class="step step--intention" style:--offset-top="120px">
+            <div class="intention" style:--offset-top="120px">
-                <p class="step--intention__text title-medium">
+                <p class="intention__content title-medium">
                     {data.process_intention}
                 </p>
             </div>

src/style/molecules/_process-step.scss

@@ -0,0 +1,118 @@
+// About page Step
+.step {
+    position: sticky;
+    top: var(--offset-top);
+
+    // Card
+    &__card {
+        display: block;
+        overflow: hidden;
+        padding: 56px 32px 32px;
+        background: $color-primary-darker;
+        border-radius: 12px;
+        transform-origin: top center;
+        transition: transform 0.8s var(--ease-quart);
+
+        @include bp (sm) {
+            --columns: 18;
+            display: grid;
+            grid-template-rows: repeat(2, 1fr);
+            padding: 5.5% 0;
+            min-height: min(45vw, 720px);
+            border-radius: 16px;
+        }
+
+        // Overlay
+        &:before {
+            content: "";
+            display: block;
+            position: absolute;
+            z-index: -1;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: #000;
+            opacity: 0;
+            pointer-events: none;
+            transition: opacity 0.8s var(--ease-quart);
+            transform: translateZ(0);
+        }
+    }
+
+    // Image
+    :global(.image) {
+        display: block;
+        overflow: hidden;
+        width: 70%;
+        margin: 0 auto 64px;
+        border-radius: 6px;
+
+        @include bp (sm) {
+            grid-column: 11 / -2;
+            grid-row: 1 / -1;
+            width: 100%;
+            height: 100%;
+            margin-bottom: 0;
+        }
+
+        :global(img) {
+            display: block;
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+    }
+
+    // Content
+    .content {
+        @include bp (sm) {
+            grid-column: 2 / span 7;
+            grid-row: 2;
+            align-self: flex-end;
+        }
+
+        h3 {
+            margin-bottom: 8px;
+            color: #fff;
+
+            @include bp (sm) {
+                margin-bottom: 16px;
+            }
+        }
+        .text {
+            line-height: 1.5;
+            font-weight: 300;
+            color: $color-secondary-light;
+        }
+    }
+
+    // Alternate content order
+    &:nth-child(even) {
+        :global(.image) {
+            @include bp (sm) {
+                grid-column: 2 / span 7;
+            }
+        }
+        .content {
+            @include bp (sm) {
+                grid-column: 11 / -2;
+            }
+        }
+    }
+
+
+    /*
+    ** States
+    */
+    // Is pinned
+    &:global(.is-pinned) {
+        .step__card {
+            transform: scale(var(--scale)) translateZ(0);
+
+            &:before {
+                opacity: var(--opacity-index);
+            }
+        }
+    }
+}

src/style/pages/_about.scss

@@ -104,162 +104,44 @@
 
             @include bp (sm) {
                 grid-column: 4 / -4;
-                margin-bottom: 120px;
             }
 
-            & > * {
+            & > :global(*) {
+                margin-top: var(--offset-top);
+                margin-bottom: calc(-1 * var(--offset-top) + 8px);
+
                 @include bp (sm) {
-                    margin-bottom: 48px;
+                    margin-bottom: calc(-1 * var(--offset-top) * var(--scale) + 36px);
                 }
             }
         }
 
-        // Each Step
+        // Intention
-        .step {
+        .intention {
+            grid-column: 1 / -1;
             position: relative;
-            display: block;
+            z-index: 2;
-            overflow: hidden;
+            display: flex;
-            padding: 56px 32px 32px;
+            flex-direction: column;
-            background: $color-primary-darker;
+            justify-content: center;
+            align-items: center;
+            min-height: min(45vw, 720px);
+            margin-top: 20px;
+            padding: 56px 32px;
             border-radius: 12px;
-            transform-origin: top center;
+            background: $color-primary-darker;
-            transition: transform 0.8s var(--ease-quart);
+            color: $color-tertiary;
+            text-align: center;
 
             @include bp (sm) {
                 --columns: 18;
-                display: grid;
+                grid-column: 4 / -4;
-                grid-template-rows: repeat(2, 1fr);
-                padding: 5.5% 0;
-                min-height: min(45vw, 720px);
                 border-radius: 16px;
             }
 
-            // Image
+            &__content {
-            :global(.image) {
+                width: clamp(250px, 75%, 562px);
-                display: block;
+                margin: 0 auto;
-                overflow: hidden;
-                width: 70%;
-                margin: 0 auto 64px;
-                border-radius: 6px;
-
-                @include bp (sm) {
-                    grid-column: 11 / -2;
-                    grid-row: 1 / -1;
-                    width: 100%;
-                    height: 100%;
-                    margin-bottom: 0;
-                }
-
-                :global(img) {
-                    display: block;
-                    width: 100%;
-                    height: 100%;
-                    object-fit: cover;
-                }
-            }
-
-            // Text
-            &__text {
-                @include bp (sm) {
-                    grid-column: 2 / span 7;
-                    grid-row: 2;
-                    align-self: flex-end;
-                }
-
-                h3 {
-                    margin-bottom: 8px;
-                    color: #fff;
-
-                    @include bp (sm) {
-                        margin-bottom: 16px;
-                    }
-                }
-                .text {
-                    line-height: 1.5;
-                    font-weight: 300;
-                    color: $color-secondary-light;
-                }
-            }
-
-            // Overlay
-            &:before {
-                content: "";
-                display: block;
-                position: absolute;
-                z-index: -1;
-                top: 0;
-                left: 0;
-                width: 100%;
-                height: 100%;
-                background: #000;
-                opacity: 0;
-                pointer-events: none;
-                transition: opacity 0.8s var(--ease-quart);
-            }
-
-            // Alternate content order
-            &:nth-child(even) {
-                :global(.image) {
-                    @include bp (sm) {
-                        grid-column: 2 / span 7;
-                    }
-                }
-                .step__text {
-                    @include bp (sm) {
-                        grid-column: 11 / -2;
-                    }
-                }
-            }
-
-            // Stacking
-            &:global(.is-stacked) {
-                position: sticky;
-                margin-bottom: calc(-1 * var(--offset-top) + 52px);
-
-                @include bp (sm) {
-                    margin-bottom: calc(-1 * var(--offset-top) + 30px);
-                }
-
-                &:not(:first-child) {
-                    margin-top: var(--offset-top);
-                }
-            }
-
-            // Is pinned
-            &:global(.is-pinned) {
-                transform: scale(var(--scale)) translateZ(0);
-                top: var(--offset-top);
-
-                &:before {
-                    opacity: var(--opacity-index);
-                }
-            }
-
-            // Intention block
-            &--intention {
-                grid-column: 1 / -1;
-                position: relative;
-                z-index: 2;
-                display: flex;
-                flex-direction: column;
-                justify-content: center;
-                align-items: center;
-                margin-top: 20px;
-                color: $color-tertiary;
-                text-align: center;
-
-                @include bp (sm, max) {
-                    padding-top: 56px;
-                    padding-bottom: 56px;
-                }
-                @include bp (sm) {
-                    grid-column: 4 / -4;
-                }
-
-                &__text {
-                    width: 75%;
-                    max-width: 512px;
-                }
             }
         }
     }