[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 => {
+        sectionsObserver = new IntersectionObserver(([{ isIntersecting, target }]: [IntersectionObserverEntry] & [{ target: HTMLElement }]) => {
-            entries.forEach(({ isIntersecting, target }: { target: HTMLElement } & IntersectionObserverEntry) => {
             target.classList.toggle('is-visible', isIntersecting)
 
             // 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,15 +103,21 @@
     </section>
 
     <section class="about__process">
+        <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">
+            <div class="steps">
-            {#each data.process_steps as { title, text, image }}
+                {#each data.process_steps as { title, text, image }, index}
                     {@const imageRatio = image ? image.width / image.height : undefined}
-                <div class="step" data-part data-stay="true">
+                    {@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"
@@ -109,16 +131,18 @@
                                 alt={image.title}
                             />
                         {/if}
-                    <div class="step__content">
+                        <div class="step__text">
-                        <h3 class="text-label">{title}</h3>
+                            <h3 class="title-medium">{title}</h3>
-                        <div class="text">
+                            <div class="text text-small">
                                 {@html text}
                             </div>
                         </div>
                     </div>
                 {/each}
-            <div class="step intention" data-part data-stay="true">
+            </div>
-                <p class="intention__text title-medium">
+
+            <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,

src/style/_typography.scss

@@ -121,9 +121,13 @@
 
 // Normal
 .text-normal {
-    font-size: rem(22px);
+    font-size: rem(18px);
     font-weight: 400;
     line-height: 1.5;
+
+    @include bp (sm) {
+        font-size: rem(22px);
+    }
 }
 
 // Small

src/style/molecules/_heading.scss

@@ -1,10 +1,11 @@
 .heading {
     overflow: hidden;
+    margin-bottom: 72px;
     text-align: center;
     color: $color-tertiary;
 
     @include bp (sm) {
-        margin-bottom: 128px;
+        margin-bottom: clamp(72px, 8vw, 128px);
     }
 
     // Title

src/style/pages/_about.scss

@@ -3,10 +3,10 @@
     ** Purpose
     */
     &__purpose {
+        position: relative;
         text-align: center;
 
         .container-wide {
-            position: relative;
             display: flex;
             align-items: center;
             overflow: hidden;
@@ -14,7 +14,6 @@
             min-height: calc(100vh - var(--sides));
             color: #fff;
             padding: 0 8%;
-            box-shadow: inset 0 0 0 2px $color-primary-tertiary20;
             border-radius: 16px;
 
             @include bp (sm) {
@@ -66,19 +65,32 @@
             margin: 128px 0 0;
         }
 
+        .container {
+            @include bp (mob-lg, max) {
+                padding: 0 8px;
+            }
+        }
+
         .title {
+            grid-column: 1 / -1;
             max-width: 400px;
             margin: 0 auto 48px;
-            padding: 0 16px;
+            padding: 0 32px;
             text-align: center;
 
             @include bp (sm) {
+                grid-column: 1 / -1;
                 margin-bottom: 80px;
+                padding: 0 16px;
             }
 
             h2 {
-                margin-bottom: 24px;
+                margin-bottom: 16px;
                 color: $color-secondary;
+
+                @include bp (sm) {
+                    margin-bottom: 24px;
+                }
             }
             p {
                 color: $color-tertiary;
@@ -88,77 +100,56 @@
 
         // Steps grid
         .steps {
-            // gap: 8px;
+            grid-column: 1 / -1;
 
             @include bp (sm) {
-                display: grid;
+                grid-column: 4 / -4;
-                grid-template-columns: repeat(16, 1fr);
+                margin-bottom: 120px;
-                gap: 12px;
             }
 
             & > * {
-                --delay: 150ms;
+                @include bp (sm) {
-                opacity: 0;
+                    margin-bottom: 48px;
-                transform: translate3d(0, 40px, 0);
-                transition-property: opacity, transform;
-                transition-duration: 1.6s;
-                transition-timing-function: var(--ease-quart);
-
-                // Add reveal delay for every second item
-                &:nth-child(2n) {
-                    transition-delay: var(--delay);
                 }
             }
-
-            // Visible step state
-            :global(.is-visible) {
-                opacity: 1;
-                transform: translate3d(0,0,0);
-            }
         }
 
         // Each Step
         .step {
-            display: flex;
+            position: relative;
-            flex-direction: column;
+            display: block;
-            padding: 48px;
+            overflow: hidden;
+            padding: 56px 32px 32px;
             background: $color-primary-darker;
-            border-radius: 8px;
+            border-radius: 12px;
+            transform-origin: top center;
+            transition: transform 0.8s var(--ease-quart);
 
             @include bp (sm) {
-                min-height: 480px;
+                --columns: 18;
+                display: grid;
+                grid-template-rows: repeat(2, 1fr);
+                padding: 5.5% 0;
+                min-height: min(45vw, 720px);
                 border-radius: 16px;
             }
 
-            &:nth-child(1) {
-                grid-column: span 10;
-            }
-            &:nth-child(2) {
-                grid-column: span 6;
-            }
-            &:nth-child(3) {
-                grid-column: span 6;
-            }
-            &:nth-child(4) {
-                grid-column: span 10;
-            }
-            &:nth-child(5) {
-                grid-column: span 8;
-            }
-            &:nth-child(6) {
-                grid-column: span 8;
-            }
-
             // Image
             :global(.image) {
                 display: block;
-                margin-right: auto;
-                width: 60%;
-                max-width: 600px;
-                max-height: 364px;
                 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%;
@@ -167,49 +158,111 @@
                 }
             }
 
-            // Content
+            // Text
-            &__content {
+            &__text {
-                max-width: 568px;
-                width: 80%;
-                margin-top: 40px;
-
                 @include bp (sm) {
-                    margin-top: auto;
+                    grid-column: 2 / span 7;
-                    padding-top: 40px;
+                    grid-row: 2;
+                    align-self: flex-end;
                 }
 
                 h3 {
                     margin-bottom: 8px;
                     color: #fff;
-                    font-weight: 600;
-                }
-                .text {
-                    line-height: 1.4;
-                    font-weight: 300;
-                    color: $color-secondary-light;
 
                     @include bp (sm) {
-                        font-size: rem(18px);
+                        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 {
+            &--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;
                 }
             }
         }
+    }
 
 
     /*
@@ -218,10 +271,10 @@
     &__photos {
         position: relative;
         z-index: 1;
-        margin-top: -32px;
+        margin-top: -64px;
 
         @include bp (sm) {
-            margin-top: -80px;
+            margin-top: -120px;
         }
 
         .container-wide {
@@ -230,21 +283,31 @@
 
         .photos-grid {
             display: grid;
-            grid-template-columns: repeat(7, 1fr);
+            grid-template-columns: repeat(5, 1fr);
             gap: 12px;
             margin: -5% -5% 0;
             transform: rotate(-6deg) translateY(var(--parallax-y)) translateZ(0);
             transition: transform 0.8s var(--ease-quart);
+
+            @include bp (sm) {
+                grid-template-columns: repeat(7, 1fr);
+                gap: 12px;
+                margin: -5% -5% 0;
+            }
         }
 
         :global(picture) {
             width: 100%;
             height: auto;
-            border-radius: 8px;
+            border-radius: 6px;
             overflow: hidden;
             cursor: pointer;
             transition: opacity 1s var(--ease-quart);
 
+            @include bp (sm) {
+                border-radius: 8px;
+            }
+
             :global(img) {
                 display: block;
                 width: 100%;
@@ -293,6 +356,8 @@
 
         // Modules
         .grid-modules {
+            grid-column: 1 / -1;
+
             @include bp (sm) {
                 grid-column: 2 / -2;
             }
@@ -303,24 +368,28 @@
     &__interest {
         position: relative;
         z-index: 2;
+        display: block;
+        margin-bottom: 20px;
+        padding: 72px 32px;
         background: $color-primary-tertiary20;
         border-radius: 12px;
         box-shadow: 0px -24px 120px rgba($color-primary-darker, 0.8);
 
         @include bp (sm) {
+            display: grid;
             grid-column: 2 / -2;
             margin-bottom: 48px;
-            padding: 120px 0;
+            padding: clamp(72px, 8vw, 160px) 0;
         }
 
         h2 {
-            margin-bottom: 56px;
             grid-column: 1 / -1;
+            margin-bottom: 64px;
             color: #fff;
             text-align: center;
 
             @include bp (sm) {
-                margin-bottom: 88px;
+                margin-bottom: 104px;
             }
         }
         .blocks {
@@ -334,14 +403,26 @@
         .block {
             text-align: center;
 
+            &:not(:last-child) {
+                margin-bottom: 64px;
+
+                @include bp (sm) {
+                    margin-bottom: 0;
+                }
+            }
+
             h3 {
                 margin-bottom: 12px;
                 color: $color-secondary-light;
                 font-weight: 600;
             }
             p {
-                margin-bottom: 32px;
+                margin-bottom: 24px;
                 font-weight: 300;
+
+                @include bp (sm) {
+                    margin-bottom: 32px;
+                }
             }
         }
     }