✨ 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/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;