From a673646645f2a7a17d48d3e6741bb28e9af8deb2 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:06:25 +0200
Subject: [PATCH 1/4] fix: use correct CustomEvent for email copying

---
 apps/website/src/routes/(site)/about/+page.svelte | 2 +-
 apps/website/src/utils/functions/index.ts         | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/website/src/routes/(site)/about/+page.svelte b/apps/website/src/routes/(site)/about/+page.svelte
index 5b3dcd0..52e8dc6 100644
--- a/apps/website/src/routes/(site)/about/+page.svelte
+++ b/apps/website/src/routes/(site)/about/+page.svelte
@@ -379,7 +379,7 @@
                                         in:fly={{ y: 4, duration: 325, easing: quartOutSvelte, delay: 250 }}
                                         out:fade={{ duration: 250, easing: quartOutSvelte }}
                                         use:mailtoClipboard
-                                        oncopied={(email: string) => {
+                                        oncopied={({ detail: email }: CustomEvent<string>) => {
                                             emailCopied = email
                                             // Clear timeout and add timeout to hide message
                                             clearTimeout(emailCopiedTimeout)
diff --git a/apps/website/src/utils/functions/index.ts b/apps/website/src/utils/functions/index.ts
index c5f6f38..a7a564c 100644
--- a/apps/website/src/utils/functions/index.ts
+++ b/apps/website/src/utils/functions/index.ts
@@ -14,7 +14,7 @@ export const mailtoClipboard = (node: HTMLElement) => {
         navigator.clipboard.writeText(emailAddress)
 
         // Send event
-        node.dispatchEvent(new CustomEvent('copied', emailAddress))
+        node.dispatchEvent(new CustomEvent('copied', { detail: emailAddress }))
 
         // Record event in analytics
         sendEvent('emailCopy')

From 2a29a32ff4ce33576c7e5076ef7f3db72b57cc51 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:06:48 +0200
Subject: [PATCH 2/4] fix: use correct data bindings for About page metas

---
 apps/website/src/routes/(site)/about/+page.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/website/src/routes/(site)/about/+page.svelte b/apps/website/src/routes/(site)/about/+page.svelte
index 52e8dc6..3d9578f 100644
--- a/apps/website/src/routes/(site)/about/+page.svelte
+++ b/apps/website/src/routes/(site)/about/+page.svelte
@@ -174,7 +174,7 @@
 <svelte:window bind:scrollY bind:innerWidth bind:innerHeight />
 
 <Metas
-    title={data.data.about.seo_title}
+    title={data.about.seo_title}
     description={data.about.seo_description}
     image={data.about.seo_image ? getAssetUrlKey(data.about.seo_image.id, 'share-image') : null}
 />

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 3/4] 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;
         }
     }

From 191e1ef8470a6ff52b7a773a72d8e03a06dd9312 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 16:28:14 +0200
Subject: [PATCH 4/4] refactor: rethink ProcessStep transition + use tick in
 transitions

---
 apps/website/src/animations/transitions.ts    | 56 ++++++++++---------
 .../molecules/ProcessStep/ProcessStep.svelte  |  7 +--
 .../src/routes/(site)/about/+page.svelte      | 29 +++++-----
 3 files changed, 46 insertions(+), 46 deletions(-)

diff --git a/apps/website/src/animations/transitions.ts b/apps/website/src/animations/transitions.ts
index df45e23..a7ba82f 100644
--- a/apps/website/src/animations/transitions.ts
+++ b/apps/website/src/animations/transitions.ts
@@ -9,24 +9,25 @@ import { quartOut } from './easings'
 export const scaleFade = (node: HTMLElement, {
     scale = [0.7, 1],
     opacity = [1, 0],
-    x = null,
+    x = [0, 0],
     delay = 0,
-    duration = 1,
+    duration = 0.75,
 }): TransitionConfig => {
-    return {
-        css: () => {
-            animate(node, {
-                scale,
-                opacity,
-                x,
-                z: 0,
-            }, {
-                easing: quartOut,
-                duration,
-                delay,
-            })
+    const anim = animate(node, {
+        scale,
+        opacity,
+        x,
+        z: 0,
+    }, {
+        easing: quartOut,
+        duration,
+        delay,
+    })
 
-            return null
+    return {
+        duration: anim.duration * 1000,
+        tick: (t) => {
+            anim.currentTime = t
         }
     }
 }
@@ -42,19 +43,20 @@ export const revealSplit = (node: HTMLElement, {
     duration = 1,
     delay = 0,
 }): TransitionConfig => {
-    return {
-        css: () => {
-            animate(node.querySelectorAll(children), {
-                opacity,
-                y,
-                z: 0,
-            }, {
-                easing: quartOut,
-                duration,
-                delay: stagger(0.04, { start: delay }),
-            })
+    const anim = animate(node.querySelectorAll(children), {
+        opacity,
+        y,
+        z: 0,
+    }, {
+        easing: quartOut,
+        duration,
+        delay: stagger(0.04, { start: delay }),
+    })
 
-            return null
+    return {
+        duration: anim.duration * 1000,
+        tick: (t) => {
+            anim.currentTime = t
         }
     }
 }
diff --git a/apps/website/src/components/molecules/ProcessStep/ProcessStep.svelte b/apps/website/src/components/molecules/ProcessStep/ProcessStep.svelte
index 2ca6951..41b1a4e 100644
--- a/apps/website/src/components/molecules/ProcessStep/ProcessStep.svelte
+++ b/apps/website/src/components/molecules/ProcessStep/ProcessStep.svelte
@@ -3,18 +3,18 @@
 </style>
 
 <script lang="ts">
+    import { scale } from 'svelte/transition'
+    import { quartOut } from 'svelte/easing'
     import { scaleFade } from '$animations/transitions'
     // Components
     import Image from '$components/atoms/Image.svelte'
     import { getAssetUrlKey } from '$utils/api'
 
     let {
-        index,
         text,
         image,
         video,
     }: {
-        index: number
         text: string
         image?: any
         video?: any
@@ -25,9 +25,8 @@
 
 <div
     class="step grid"
-    style:--index={index}
     in:scaleFade|local={{ scale: [1.1, 1], opacity: [0, 1], x: [20, 0], delay: 0.2 }}
-    out:scaleFade|local={{ scale: [1, 0.9], opacity: [1, 0], x: [0, -20] }}
+    out:scale={{ start: 0.9, duration: 750, easing: quartOut }}
 >
     {#if image || video}
         <div class="media">
diff --git a/apps/website/src/routes/(site)/about/+page.svelte b/apps/website/src/routes/(site)/about/+page.svelte
index a0da7a5..9e14b16 100644
--- a/apps/website/src/routes/(site)/about/+page.svelte
+++ b/apps/website/src/routes/(site)/about/+page.svelte
@@ -26,7 +26,8 @@
     let innerWidth = $state<number>()
     let photosGridEl: HTMLElement
     let photosGridParallax = $state<number>()
-    let currentStep = $state(0)
+    let currentStepIndex = $state(0)
+    const currentStep = $derived(data.about.process_steps[currentStepIndex])
     let emailCopied = $state<string>()
     let emailCopiedTimeout: ReturnType<typeof setTimeout> | number
 
@@ -312,13 +313,13 @@
 
                 <ol>
                     {#each data.about.process_steps as { title }, index}
-                        <li class:is-active={index === currentStep}>
+                        <li class:is-active={index === currentStepIndex}>
                             <a
                                 class="title-big"
                                 href="#step-{index + 1}"
                                 onclick={(event) => {
                                     event.preventDefault()
-                                    currentStep = index
+                                    currentStepIndex = index
                                     sendEvent('aboutStepSwitch')
                                 }}
                             >
@@ -330,18 +331,16 @@
             </aside>
 
             <div class="steps">
-                {#each data.about.process_steps as { text, image, video_mp4, video_webm }, index}
-                    {#if index === currentStep}
-                        <ProcessStep
-                            {index} {text}
-                            image={image ?? undefined}
-                            video={{
-                                mp4: video_mp4?.id,
-                                webm: video_webm?.id
-                            }}
-                        />
-                    {/if}
-                {/each}
+                {#key currentStep}
+                    <ProcessStep
+                        text={currentStep.text}
+                        image={currentStep.image}
+                        video={{
+                            mp4: currentStep.video_mp4?.id,
+                            webm: currentStep.video_webm?.id
+                        }}
+                    />
+                {/key}
             </div>
         </div>
     </section>