✨ Make About page stacking card scroll effect

Using Motion One example, thanks to https://codepen.io/bramus/pen/rNdzpZK (by Bramus)
2022-08-13 16:10:01 +02:00
parent 4a83ade94b
commit f688928757
6 changed files with 143 additions and 84 deletions
--- a/package.json
+++ b/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"
--- a/pnpm-lock.yaml
+++ b/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'}
--- a/src/components/molecules/ProcessStep.svelte
+++ b/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>
--- a/src/routes/about.svelte
+++ b/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
-        // stepsObserver = new IntersectionObserver(([{ intersectionRatio, target }]) => {
-        //     target.classList.toggle('is-pinned', intersectionRatio < 1)
-        // }, {
-        //     threshold: 1,
-        //     rootMargin: '-10% 0px 50%',
-        // })
-        // const steps = document.querySelectorAll('.about__process .steps > *')
-        // steps.forEach(step => stepsObserver.observe(step))
+        // Steps scroll animation
+        const cards = stepsEl.querySelectorAll('.step')
+        const cardsAmount = data.process_steps.length
+
+        cards.forEach((card: HTMLElement, i: number) => {
+            const index = i + 1
+            const reverseIndex = cardsAmount - index
+            const overlay = card.querySelector('.overlay')
+            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()
-            // stepsObserver && stepsObserver.disconnect()
+            sectionsObserver && sectionsObserver.disconnect()
        }
    })

@@ -106,16 +119,15 @@
                <p class="text-normal">{data.process_subtitle}</p>
            </div>

-            <div class="steps">
-                {#each data.process_steps as { title, text, image }, index}
-                    <ProcessStep index={index + 1}
-                        {title} {text} {image}
-                        progress={index / (data.process_steps.length - 1) * 1}
-                    />
+            <div class="steps" bind:this={stepsEl}
+                style:--cards-amount={data.process_steps.length}
+            >
+                {#each data.process_steps as step, index}
+                    <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>
--- a/src/style/molecules/_process-step.scss
+++ b/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;
-        transition: transform 0.8s var(--ease-quart);
+        transform: translateZ(0);

        @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);
-            }
-        }
-    }
 }
--- a/src/style/pages/_about.scss
+++ b/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);
-                margin-bottom: calc(-1 * var(--offset-top) + 8px);
-
-                @include bp (sm) {
-                    margin-bottom: calc(-1 * var(--offset-top) * var(--scale) + 36px);
-                }
+                position: sticky;
+                top: var(--card-margin);
+                padding-top: calc(var(--index) * var(--card-offset));
+                padding-bottom: var(--card-margin);
+                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;