From 1cc143ef275d1f2f38fed1f71237361ff8dbb646 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Mon, 5 Aug 2024 15:35:08 +0200
Subject: [PATCH] fix: various issues to reduce effect_update_depth_exceeded

+ use `scroll` from Motion One for parallax
---
 .../components/atoms/ScrollingTitle.svelte    |  2 +-
 .../molecules/Location/Location.svelte        |  2 +-
 .../molecules/Switcher/Switcher.svelte        |  2 +-
 .../InteractiveGlobe/InteractiveGlobe.svelte  |  4 +-
 .../organisms/ShopBanner/ShopBanner.svelte    |  4 +-
 .../(site)/[country]/[location]/+page.svelte  | 61 +++++++++----------
 .../src/routes/(site)/about/+page.svelte      | 23 ++++---
 apps/website/src/style/pages/_about.scss      |  2 +-
 apps/website/src/style/pages/_location.scss   |  4 +-
 9 files changed, 50 insertions(+), 54 deletions(-)

diff --git a/apps/website/src/components/atoms/ScrollingTitle.svelte b/apps/website/src/components/atoms/ScrollingTitle.svelte
index 31a5cf1..96668d2 100644
--- a/apps/website/src/components/atoms/ScrollingTitle.svelte
+++ b/apps/website/src/components/atoms/ScrollingTitle.svelte
@@ -35,7 +35,7 @@
     let scrollY = $state<number>()
     let innerWidth = $state<number>()
     let innerHeight = $state<number>()
-    let titleEl = $state<HTMLElement>()
+    let titleEl: HTMLElement
 
     // Check if title is larger than viewport to translate it
     const isLarger = $derived<boolean>(titleEl && titleEl.offsetWidth >= innerWidth)
diff --git a/apps/website/src/components/molecules/Location/Location.svelte b/apps/website/src/components/molecules/Location/Location.svelte
index 0d994a3..d278b87 100644
--- a/apps/website/src/components/molecules/Location/Location.svelte
+++ b/apps/website/src/components/molecules/Location/Location.svelte
@@ -24,7 +24,7 @@
 
     const { settings }: any = getContext('global')
 
-    let locationEl = $state<HTMLElement>()
+    let locationEl: HTMLElement
     let photoIndex = $state(0)
 
     // Location date limit
diff --git a/apps/website/src/components/molecules/Switcher/Switcher.svelte b/apps/website/src/components/molecules/Switcher/Switcher.svelte
index b361348..f617675 100644
--- a/apps/website/src/components/molecules/Switcher/Switcher.svelte
+++ b/apps/website/src/components/molecules/Switcher/Switcher.svelte
@@ -12,7 +12,7 @@
 
     const { settings: { switcher_links } }: any = getContext('global')
 
-    let switcherEl = $state<HTMLElement>()
+    let switcherEl: HTMLElement
     let isOpen = $state(false)
 
 
diff --git a/apps/website/src/components/organisms/InteractiveGlobe/InteractiveGlobe.svelte b/apps/website/src/components/organisms/InteractiveGlobe/InteractiveGlobe.svelte
index 6414965..d3a40a6 100644
--- a/apps/website/src/components/organisms/InteractiveGlobe/InteractiveGlobe.svelte
+++ b/apps/website/src/components/organisms/InteractiveGlobe/InteractiveGlobe.svelte
@@ -33,8 +33,8 @@
     } = $props()
 
     let innerWidth = $state<number>()
-    let globeParentEl = $state<HTMLElement>()
-    let globeEl = $state<HTMLElement>()
+    let globeParentEl: HTMLElement
+    let globeEl: HTMLElement
     let globe = $state<any>()
     let observer: IntersectionObserver
     let animation = $state<number>()
diff --git a/apps/website/src/components/organisms/ShopBanner/ShopBanner.svelte b/apps/website/src/components/organisms/ShopBanner/ShopBanner.svelte
index 0cc1625..50a470b 100644
--- a/apps/website/src/components/organisms/ShopBanner/ShopBanner.svelte
+++ b/apps/website/src/components/organisms/ShopBanner/ShopBanner.svelte
@@ -21,8 +21,8 @@
 
     let innerWidth = $state<number>()
     let navObserver: IntersectionObserver
-    let introEl = $state<HTMLElement>()
-    let navChooseEl = $state<HTMLElement>()
+    let introEl: HTMLElement
+    let navChooseEl: HTMLElement
     let scrolledPastIntro = $state(false)
 
 
diff --git a/apps/website/src/routes/(site)/[country]/[location]/+page.svelte b/apps/website/src/routes/(site)/[country]/[location]/+page.svelte
index ce133e2..ff019bf 100644
--- a/apps/website/src/routes/(site)/[country]/[location]/+page.svelte
+++ b/apps/website/src/routes/(site)/[country]/[location]/+page.svelte
@@ -5,7 +5,7 @@
 <script lang="ts">
     import { PUBLIC_LIST_INCREMENT } from '$env/static/public'
     import { page, navigating } from '$app/stores'
-    import { stagger, timeline } from 'motion'
+    import { scroll, stagger, timeline } from 'motion'
     import dayjs from 'dayjs'
     import relativeTime from 'dayjs/plugin/relativeTime'
     import { quartOut } from '$animations/easings'
@@ -13,6 +13,7 @@
     import { DELAY } from '$utils/constants'
     import { seenLocations } from '$utils/stores'
     import { photoFields } from '$utils/api'
+    import { lerp } from 'utils/math'
     import { padZero } from 'utils/string'
     // Components
     import Metas from '$components/Metas.svelte'
@@ -34,14 +35,13 @@
 
     dayjs.extend(relativeTime)
 
-    let introEl = $state<HTMLElement>()
+    let introEl: HTMLElement
     let photosListEl = $state<HTMLElement>()
-    let scrollY = $state<number>()
     let observerPhotos: IntersectionObserver
     let mutationPhotos: MutationObserver
     let currentPage = $state(1)
     let currentPhotosAmount = $derived(photos.length)
-    let heroOffsetY = $state(0)
+    let heroParallax = $state(0)
 
     const ended = $derived(currentPhotosAmount === totalPhotos)
     const latestPhoto = $derived(photos[0])
@@ -50,23 +50,7 @@
     /**
      * Load photos
      */
-    /** Load more photos from CTA */
-    const loadMorePhotos = async () => {
-        // Append more photos from API
-        const newPhotos: any = await loadPhotos(currentPage + 1)
-
-        if (newPhotos) {
-            photos = [...photos, ...newPhotos]
-
-            // Define actions if the number of new photos is the expected ones
-            if (newPhotos.length === Number(PUBLIC_LIST_INCREMENT)) {
-                // Increment the current page
-                currentPage++
-            }
-        }
-    }
-
-    // Load photos helper
+    /** Load photos helper */
     const loadPhotos = async (page?: number) => {
         const res = await fetch('/api/data', {
             method: 'POST',
@@ -94,15 +78,21 @@
         }
     }
 
+    /** Load more photos from CTA */
+    const loadMorePhotos = async () => {
+        // Append more photos from API
+        const newPhotos: any[] = await loadPhotos(currentPage + 1)
 
-    /**
-     * Add parallax on illustration when scrolling
-     */
-    $effect(() => {
-        if (scrollY && scrollY < introEl.offsetHeight) {
-            heroOffsetY = scrollY * 0.1
+        if (newPhotos) {
+            photos = [...photos, ...newPhotos]
+
+            // Define actions if the number of new photos is the expected ones
+            if (newPhotos.length === Number(PUBLIC_LIST_INCREMENT)) {
+                // Increment the current page
+                currentPage++
+            }
         }
-    })
+    }
 
 
     $effect(() => {
@@ -147,6 +137,15 @@
         }
 
 
+        /**
+         * Add parallax on illustration when scrolling
+         */
+        scroll(({ y }) => heroParallax = lerp(-15, 10, y.progress), {
+            target: introEl,
+            offset: ['start end', 'end start'],
+        })
+
+
         /**
          * Animations
          */
@@ -205,8 +204,6 @@
     })
 </script>
 
-<svelte:window bind:scrollY />
-
 <Metas
     title="Houses Of {location.name}"
     description="Discover {totalPhotos} beautiful homes from {location.name}, {location.country.name}"
@@ -215,7 +212,7 @@
 
 
 <main class="location-page">
-    <section class="location-page__intro grid" bind:this={introEl}>
+    <section bind:this={introEl} class="location-page__intro grid">
         <h1 class="title" class:is-short={location.name.length <= 4}>
             <span class="housesof mask">
                 <strong class="word">Houses</strong>
@@ -269,7 +266,7 @@
         </div>
 
         {#if location?.hero?.id}
-            <picture class="location-page__hero" style:--parallax-y="{heroOffsetY}px">
+            <picture class="location-page__hero" style:--parallax="{heroParallax}%">
                 <source media="(min-width: 1200px)" srcset={getAssetUrlKey(location.hero.id, 'hero-large')}>
                 <source media="(min-width: 768px)" srcset={getAssetUrlKey(location.hero.id, 'hero-small')}>
                 <img
diff --git a/apps/website/src/routes/(site)/about/+page.svelte b/apps/website/src/routes/(site)/about/+page.svelte
index 3d9578f..a0da7a5 100644
--- a/apps/website/src/routes/(site)/about/+page.svelte
+++ b/apps/website/src/routes/(site)/about/+page.svelte
@@ -6,11 +6,11 @@
     import { navigating } from '$app/stores'
     import { quartOut as quartOutSvelte } from 'svelte/easing'
     import { fade, fly } from 'svelte/transition'
-    import { animate, inView, stagger, timeline } from 'motion'
+    import { animate, inView, scroll, stagger, timeline } from 'motion'
     import { mailtoClipboard } from '$utils/functions'
     import { getAssetUrlKey } from '$utils/api'
     import { DELAY } from '$utils/constants'
-    import { map } from 'utils/math'
+    import { lerp } from 'utils/math'
     import { sendEvent } from '$utils/analytics'
     import { quartOut } from '$animations/easings'
     // Components
@@ -23,16 +23,13 @@
 
     let { data } = $props()
 
-    let scrollY = $state<number>()
     let innerWidth = $state<number>()
-    let innerHeight = $state<number>()
-    let photosGridEl = $state<HTMLElement>()
-    let photosGridOffset = $state<number>()
+    let photosGridEl: HTMLElement
+    let photosGridParallax = $state<number>()
     let currentStep = $state(0)
     let emailCopied = $state<string>()
     let emailCopiedTimeout: ReturnType<typeof setTimeout> | number
 
-    const parallaxPhotos = $derived(photosGridEl && map(scrollY, photosGridOffset - innerHeight, photosGridOffset + innerHeight / 1.5, 0, innerHeight * 0.15, true))
     const fadedPhotosIndexes = $derived(
         innerWidth > 768
             ? [0, 2, 5, 7, 9, 12, 17, 20, 22, 26, 30, 32, 34]
@@ -41,9 +38,11 @@
 
 
     $effect(() => {
-        // Update photos grid top offset
-        photosGridOffset = photosGridEl.offsetTop
-
+        // Add parallax to photos grid
+        scroll(({ y }) => photosGridParallax = lerp(-15, 10, y.progress), {
+            target: photosGridEl,
+            offset: ['start end', 'end start']
+        })
 
         /**
          * Animations
@@ -171,7 +170,7 @@
     })
 </script>
 
-<svelte:window bind:scrollY bind:innerWidth bind:innerHeight />
+<svelte:window bind:innerWidth />
 
 <Metas
     title={data.about.seo_title}
@@ -349,7 +348,7 @@
 
     <section class="about__photos" bind:this={photosGridEl}>
         <div class="container-wide">
-            <div class="photos-grid" style:--parallax-y="{parallaxPhotos}px">
+            <div class="photos-grid" style:--parallax="{photosGridParallax}%">
                 {#each data.photos as { image: { id }, title }, index}
                     <AboutGridPhoto
                         class="grid-photo"
diff --git a/apps/website/src/style/pages/_about.scss b/apps/website/src/style/pages/_about.scss
index 9fe6d8f..044dce3 100644
--- a/apps/website/src/style/pages/_about.scss
+++ b/apps/website/src/style/pages/_about.scss
@@ -492,7 +492,7 @@
             grid-template-columns: repeat(5, 1fr);
             gap: 1.75vw;
             margin: -5% -5% 0;
-            transform: rotate(-6deg) translateY(var(--parallax-y)) translateZ(0);
+            transform: rotate(-6deg) translateY(var(--parallax)) translateZ(0);
             transition: transform 0.8s var(--ease-quart);
 
             @include bp (sm) {
diff --git a/apps/website/src/style/pages/_location.scss b/apps/website/src/style/pages/_location.scss
index 6ff005e..7e11be2 100644
--- a/apps/website/src/style/pages/_location.scss
+++ b/apps/website/src/style/pages/_location.scss
@@ -173,8 +173,8 @@
             pointer-events: none;
             user-select: none;
             filter: grayscale(25%);
-            transform: translate3d(0, var(--parallax-y), 0);
-            transition: transform 0.7s var(--ease-quart);
+            transform: translateY(var(--parallax)) translateZ(0);
+            transition: transform 0.5s var(--ease-quart);
             will-change: transform, opacity;
         }
     }