✨ Make About page stacking card scroll effect

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

package.json

@@ -20,6 +20,7 @@
     "dayjs": "^1.11.4",
     "embla-carousel": "^7.0.0",
     "focus-visible": "^5.2.0",
+    "motion": "^10.13.3",
     "ogl": "^0.0.97",
     "sanitize.css": "^13.0.0",
     "tweakpane": "^3.1.0"

pnpm-lock.yaml

@@ -17,6 +17,7 @@ specifiers:
   eslint: ^8.21.0
   eslint-plugin-svelte3: ^4.0.0
   focus-visible: ^5.2.0
+  motion: ^10.13.3
   ogl: ^0.0.97
   postcss: ^8.4.16
   postcss-focus-visible: ^7.1.0
@@ -40,6 +41,7 @@ dependencies:
   dayjs: 1.11.4
   embla-carousel: 7.0.0
   focus-visible: 5.2.0
+  motion: 10.13.3
   ogl: 0.0.97
   sanitize.css: 13.0.0
   tweakpane: 3.1.0
@@ -298,6 +300,67 @@ packages:
       - supports-color
     dev: true
 
+  /@motionone/animation/10.13.2:
+    resolution: {integrity: sha512-YGWss58IR2X4lOjW89rv1Q+/Nq/QhfltaggI7i8sZTpKC1yUvM+XYDdvlRpWc6dk8LviMBrddBJAlLdbaqeRmw==}
+    dependencies:
+      '@motionone/easing': 10.13.2
+      '@motionone/types': 10.13.2
+      '@motionone/utils': 10.13.2
+      tslib: 2.4.0
+    dev: false
+
+  /@motionone/dom/10.13.2:
+    resolution: {integrity: sha512-THCRW+M7JUTbHRiWFJU13pju7bZlnPjZz9VDXA/h/Qj/Or7LvzKY/XfEy45rUlO0wXSa4lQ+1DGlrZNewamdDA==}
+    dependencies:
+      '@motionone/animation': 10.13.2
+      '@motionone/generators': 10.13.2
+      '@motionone/types': 10.13.2
+      '@motionone/utils': 10.13.2
+      hey-listen: 1.0.8
+      tslib: 2.4.0
+    dev: false
+
+  /@motionone/easing/10.13.2:
+    resolution: {integrity: sha512-3HqctS5NyDfDQ+8+cZqc3Pu7I6amFCt9zDUjcozHyFXHh4PKYHK4+GJDFjJIS8bCAF2BrJmpmduDQ2V7lFEYeQ==}
+    dependencies:
+      '@motionone/utils': 10.13.2
+      tslib: 2.4.0
+    dev: false
+
+  /@motionone/generators/10.13.2:
+    resolution: {integrity: sha512-QMoXV1MXEEhR6D3dct/RMMS1FwJlAsW+kMPbFGzBA4NbweblgeYQCft9DcDAVpV9wIwD6qvlBG9u99sOXLfHiA==}
+    dependencies:
+      '@motionone/types': 10.13.2
+      '@motionone/utils': 10.13.2
+      tslib: 2.4.0
+    dev: false
+
+  /@motionone/svelte/10.13.2:
+    resolution: {integrity: sha512-p6gH7oGhbonHzrPeUPzZiU3dx2yjDYQ7K00w9GaTbXBfmH/+rjUQ6vvG5SPvjY6BLtMK3/FMK512WvOMtvDQPQ==}
+    dependencies:
+      '@motionone/dom': 10.13.2
+      tslib: 2.4.0
+    dev: false
+
+  /@motionone/types/10.13.2:
+    resolution: {integrity: sha512-yYV4q5v5F0iADhab4wHfqaRJnM/eVtQLjUPhyEcS72aUz/xyOzi09GzD/Gu+K506BDfqn5eULIilUI77QNaqhw==}
+    dev: false
+
+  /@motionone/utils/10.13.2:
+    resolution: {integrity: sha512-6Lw5bDA/w7lrPmT/jYWQ76lkHlHs9fl2NZpJ22cVy1kKDdEH+Cl1U6hMTpdphO6VQktQ6v2APngag91WBKLqlA==}
+    dependencies:
+      '@motionone/types': 10.13.2
+      hey-listen: 1.0.8
+      tslib: 2.4.0
+    dev: false
+
+  /@motionone/vue/10.13.2:
+    resolution: {integrity: sha512-DfMzOUwKlzyjpwxF+RP1Q74ClmeoanPAeSGfD/JTvAyR1W6ARCOBMFpdgDvile1o7FNgHGx2RHt8210MsOE59g==}
+    dependencies:
+      '@motionone/dom': 10.13.2
+      tslib: 2.4.0
+    dev: false
+
   /@nodelib/fs.scandir/2.1.5:
     resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
     engines: {node: '>= 8'}
@@ -1848,6 +1911,17 @@ packages:
     hasBin: true
     dev: true
 
+  /motion/10.13.3:
+    resolution: {integrity: sha512-lfBuoZL8xo0djAD3zGrMuSuc4J9MquE6hzRCsO9cVp+DgIUvNmvbM7+7SrZtpjLKxPWbppm+P56FRtVvMcGj1A==}
+    dependencies:
+      '@motionone/animation': 10.13.2
+      '@motionone/dom': 10.13.2
+      '@motionone/svelte': 10.13.2
+      '@motionone/types': 10.13.2
+      '@motionone/utils': 10.13.2
+      '@motionone/vue': 10.13.2
+    dev: false
+
   /mri/1.2.0:
     resolution: {integrity: sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==}
     engines: {node: '>=4'}

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 class="step" style:--index={index}>
-
-<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
@@ -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>

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
+        // Steps scroll animation
-        // stepsObserver = new IntersectionObserver(([{ intersectionRatio, target }]) => {
+        const cards = stepsEl.querySelectorAll('.step')
-        //     target.classList.toggle('is-pinned', intersectionRatio < 1)
+        const cardsAmount = data.process_steps.length
-        // }, {
+
-        //     threshold: 1,
+        cards.forEach((card: HTMLElement, i: number) => {
-        //     rootMargin: '-10% 0px 50%',
+            const index = i + 1
-        // })
+            const reverseIndex = cardsAmount - index
-        // const steps = document.querySelectorAll('.about__process .steps > *')
+            const overlay = card.querySelector('.overlay')
-        // steps.forEach(step => stepsObserver.observe(step))
+            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()
+            sectionsObserver && sectionsObserver.disconnect()
-            // stepsObserver && stepsObserver.disconnect()
         }
     })
 
@@ -106,16 +119,15 @@
                 <p class="text-normal">{data.process_subtitle}</p>
             </div>
 
-            <div class="steps">
+            <div class="steps" bind:this={stepsEl}
-                {#each data.process_steps as { title, text, image }, index}
+                style:--cards-amount={data.process_steps.length}
-                    <ProcessStep index={index + 1}
+            >
-                        {title} {text} {image}
+                {#each data.process_steps as step, index}
-                        progress={index / (data.process_steps.length - 1) * 1}
+                    <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>

src/style/molecules/_process-step.scss

@@ -1,17 +1,14 @@
 // About page Step
 .step {
-    position: sticky;
-    top: var(--offset-top);
-
     // Card
     &__card {
+        position: relative;
         display: block;
         overflow: hidden;
         padding: 56px 32px 32px;
         background: $color-primary-darker;
         border-radius: 12px;
-        transform-origin: top center;
+        transform: translateZ(0);
-        transition: transform 0.8s var(--ease-quart);
 
         @include bp (sm) {
             --columns: 18;
@@ -21,27 +18,12 @@
             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) {
+        position: relative;
+        z-index: 2;
         display: block;
         overflow: hidden;
         width: 70%;
@@ -66,6 +48,9 @@
 
     // Content
     .content {
+        position: relative;
+        z-index: 2;
+
         @include bp (sm) {
             grid-column: 2 / span 7;
             grid-row: 2;
@@ -87,6 +72,22 @@
         }
     }
 
+    // Overlay
+    .overlay {
+        content: "";
+        display: block;
+        position: absolute;
+        z-index: 0;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: #000;
+        opacity: 0;
+        pointer-events: none;
+        transform: translateZ(0);
+    }
+
     // Alternate content order
     &:nth-child(even) {
         :global(.image) {
@@ -100,19 +101,4 @@
             }
         }
     }
-
-
-    /*
-    ** States
-    */
-    // Is pinned
-    &:global(.is-pinned) {
-        .step__card {
-            transform: scale(var(--scale)) translateZ(0);
-
-            &:before {
-                opacity: var(--opacity-index);
-            }
-        }
-    }
 }

src/style/pages/_about.scss

@@ -100,19 +100,22 @@
 
         // Steps grid
         .steps {
+            --card-offset: 16px;
+            --card-margin: 40px;
             grid-column: 1 / -1;
 
             @include bp (sm) {
                 grid-column: 4 / -4;
+                padding-bottom: calc(var(--cards-amount) * var(--card-offset));
             }
 
             & > :global(*) {
-                margin-top: var(--offset-top);
+                position: sticky;
-                margin-bottom: calc(-1 * var(--offset-top) + 8px);
+                top: var(--card-margin);
-
+                padding-top: calc(var(--index) * var(--card-offset));
-                @include bp (sm) {
+                padding-bottom: var(--card-margin);
-                    margin-bottom: calc(-1 * var(--offset-top) * var(--scale) + 36px);
+                margin-bottom: calc(-1 * var(--index) * var(--card-offset));
-                }
+                transform-origin: center top;
             }
         }
 
@@ -126,7 +129,6 @@
             justify-content: center;
             align-items: center;
             min-height: min(45vw, 720px);
-            margin-top: 20px;
             padding: 56px 32px;
             border-radius: 12px;
             background: $color-primary-darker;