Merge branch 'dev'

2024-08-05 16:28:18 +02:00
parent 2f3e5f2866 191e1ef847
commit d3482ceb54
12 changed files with 99 additions and 103 deletions
--- 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
        }
    }
 }
--- 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)
--- 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
--- 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">
--- 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)


--- 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>()
--- 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)


--- 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
--- 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,14 @@

    let { data } = $props()

-    let scrollY = $state<number>()
    let innerWidth = $state<number>()
-    let innerHeight = $state<number>()
-    let photosGridEl = $state<HTMLElement>()
-    let photosGridOffset = $state<number>()
-    let currentStep = $state(0)
+    let photosGridEl: HTMLElement
+    let photosGridParallax = $state<number>()
+    let currentStepIndex = $state(0)
+    const currentStep = $derived(data.about.process_steps[currentStepIndex])
    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 +39,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,10 +171,10 @@
    })
 </script>

-<svelte:window bind:scrollY bind:innerWidth bind:innerHeight />
+<svelte:window bind:innerWidth />

 <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}
 />
@@ -313,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')
                                }}
                            >
@@ -331,25 +331,23 @@
            </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>

    <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"
@@ -379,7 +377,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)
--- 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) {
--- 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;
        }
    }
--- 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')