From 8b4070aeb249094feadc1f13407058715ffdfa7d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Wed, 17 Nov 2021 21:54:22 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Setup=20page=20transitions?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Bugged for some reason, the old page stays before the new page loading at the end
---
 src/routes/[country]/[location]/index.svelte | 28 +++++++++------
 src/routes/__layout.svelte                   | 36 ++++++++++++++++++--
 src/routes/credits.svelte                    |  7 +++-
 src/routes/index.svelte                      | 12 ++++---
 src/routes/locations.svelte                  |  7 +++-
 src/routes/photos.svelte                     |  3 +-
 src/routes/shop/__layout.svelte              |  7 +++-
 src/routes/subscribe.svelte                  |  7 +++-
 src/style/_base.scss                         | 22 ++++++++++++
 src/style/pages/_location.scss               | 29 ++++++++++------
 src/utils/contants.ts                        | 10 ++++++
 src/utils/stores/index.ts                    |  3 ++
 12 files changed, 140 insertions(+), 31 deletions(-)

diff --git a/src/routes/[country]/[location]/index.svelte b/src/routes/[country]/[location]/index.svelte
index 6303163..aa60ee5 100644
--- a/src/routes/[country]/[location]/index.svelte
+++ b/src/routes/[country]/[location]/index.svelte
@@ -1,9 +1,11 @@
 <script lang="ts">
     import { page } from '$app/stores'
     import { getAssetUrlKey } from '$utils/helpers'
+    import { fade } from 'svelte/transition'
     import dayjs from 'dayjs'
     import advancedFormat from 'dayjs/plugin/advancedFormat.js'
     import relativeTime from 'dayjs/plugin/relativeTime.js'
+    import { DURATION } from '$utils/contants'
     // Components
     import Metas from '$components/Metas.svelte'
     import Icon from '$components/atoms/Icon.svelte'
@@ -95,14 +97,11 @@
 />
 
 
-<main class="location-page">
-    <section class="location-page__intro grid"
-        style="
-            --illus-desktop: url({getAssetUrlKey(hasIllustration && location.illustration_desktop.id, 'illustration-desktop-1x')});
-            --illus-desktop-2x: url({getAssetUrlKey(hasIllustration && location.illustration_desktop_2x.id, 'illustration-desktop-2x')});
-            --illus-mobile: url({getAssetUrlKey(hasIllustration && location.illustration_mobile.id, 'illustration-mobile')});
-        "
-    >
+
+<main class="location-page"
+    in:fade={{ duration: DURATION.PAGE_IN, delay: DURATION.PAGE_OUT }}
+    out:fade={{ duration: DURATION.PAGE_OUT }}
+>
         <h1 class="title">
             <span class="housesof">
                 <strong>Houses</strong>
@@ -155,7 +154,16 @@
             </div>
         </div>
 
-        <div class="location-page__illustration" />
+        <div class="location-page__illustration"
+            style="
+                --illus-desktop: url({getAssetUrlKey(hasIllustration && location.illustration_desktop.id, 'illustration-desktop-1x')});
+                --illus-desktop-2x: url({getAssetUrlKey(hasIllustration && location.illustration_desktop_2x.id, 'illustration-desktop-2x')});
+                --illus-mobile: url({getAssetUrlKey(hasIllustration && location.illustration_mobile.id, 'illustration-mobile')});
+                --parallax-y: {illustrationOffsetY}px;
+            "
+        >
+            <div />
+        </div>
     </section>
 
     {#if photos.length}
@@ -174,7 +182,7 @@
                         </p>
                     </div>
                     <figure class="house__photo">
-                        <a href="/{params.country}/{params.location}/{slug}">
+                        <a href="/{params.country}/{params.location}/{slug}" sveltekit:prefetch sveltekit:noscroll>
                             <Image
                                 id={id}
                                 sizeKey="photo-list"
diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte
index 20d6580..94f3bb7 100644
--- a/src/routes/__layout.svelte
+++ b/src/routes/__layout.svelte
@@ -1,7 +1,9 @@
 <script lang="ts">
     import '../style/style.scss'
-    import { page } from '$app/stores'
-    import { setContext } from 'svelte'
+    import { navigating, page } from '$app/stores'
+    import { onMount, setContext } from 'svelte'
+    import { pageLoading } from '$utils/stores'
+    import { DURATION } from '$utils/contants'
     import '$utils/polyfills'
     // Components
     import SVGSprite from '$components/SVGSprite.svelte'
@@ -16,6 +18,32 @@
         ...data,
         count,
     })
+
+
+    /**
+     * On page change
+     */
+     navigating.subscribe((store: any) => {
+        if (store) {
+            $pageLoading = true
+
+            // Turn page loading when changing page
+            setTimeout(() => {
+                $pageLoading = false
+            }, DURATION.PAGE_IN * 1.25)
+
+            // Scroll back to top between page transitions
+            setTimeout(() => {
+                // scrollToTop()
+                window.scrollTo(0,0)
+            }, DURATION.PAGE_OUT)
+        }
+    })
+
+    onMount(() => {
+        // Avoid FOUC
+        document.body.style.opacity = '1'
+    })
 </script>
 
 <Switcher />
@@ -26,6 +54,10 @@
     <Footer />
 {/if}
 
+{#if $pageLoading}
+    <div class="page-loading" />
+{/if}
+
 <SVGSprite />
 
 <script context="module" lang="ts">
diff --git a/src/routes/credits.svelte b/src/routes/credits.svelte
index 7c95b9c..e8a8dd7 100644
--- a/src/routes/credits.svelte
+++ b/src/routes/credits.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+    import { fade } from 'svelte/transition'
+    import { DURATION } from '$utils/contants'
     // Components
     import Metas from '$components/Metas.svelte'
     import SiteTitle from '$components/atoms/SiteTitle.svelte'
@@ -14,7 +16,10 @@
 />
 
 
-<main class="credits">
+<main class="credits"
+    in:fade={{ duration: DURATION.PAGE_IN, delay: DURATION.PAGE_OUT }}
+    out:fade={{ duration: DURATION.PAGE_OUT }}
+>
     <section class="credits__heading">
         <SiteTitle variant="inline" />
         <p class="text-medium">{data.credits.text}</p>
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index b2dde34..9dca1fe 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
     import { getContext, onMount } from 'svelte'
+    import { fade } from 'svelte/transition'
     import { page } from '$app/stores'
-    import { lerp, map } from '$utils/functions'
     import anime from 'animejs'
+    import { DURATION } from '$utils/contants'
     // Components
     import Metas from '$components/Metas.svelte'
     import SplitText from '$components/SplitText.svelte'
@@ -43,9 +44,9 @@
         // Reveal text
         introTimeline.add({
             targets: '.homepage__headline',
-            translateY: [24, 0],
+            translateY: [16, 0],
             opacity: [0, 1],
-        }, 600)
+        }, 900)
 
         // Animate collage photos
         introTimeline.add({
@@ -71,7 +72,10 @@
     image=""
 />
 
-<main class="homepage">
+<main class="homepage"
+    in:fade={{ duration: DURATION.PAGE_IN, delay: DURATION.PAGE_OUT }}
+    out:fade={{ duration: DURATION.PAGE_OUT }}
+>
     <section class="homepage__intro">
         <ScrollingTitle tag="h1" class="homepage__title--houses" label="Houses of the World" parallax={introTitleParallax} offsetTop={100}>
             <SplitText text="Houses" mode="chars" />
diff --git a/src/routes/locations.svelte b/src/routes/locations.svelte
index a0d76d4..77f769c 100644
--- a/src/routes/locations.svelte
+++ b/src/routes/locations.svelte
@@ -1,5 +1,7 @@
 <script lang="ts">
     import { getContext } from 'svelte'
+    import { fade } from 'svelte/transition'
+    import { DURATION } from '$utils/contants'
     // Components
     import Metas from '$components/Metas.svelte'
     import InteractiveGlobe from '$components/organisms/InteractiveGlobe.svelte'
@@ -17,7 +19,10 @@
     image=""
 />
 
-<main class="explore">
+<main class="explore"
+    in:fade={{ duration: DURATION.PAGE_IN, delay: DURATION.PAGE_OUT }}
+    out:fade={{ duration: DURATION.PAGE_OUT }}
+>
     <Heading
         text="Explore the globe to discover unique locations across the world"
     />
diff --git a/src/routes/photos.svelte b/src/routes/photos.svelte
index f521f6e..e3b4346 100644
--- a/src/routes/photos.svelte
+++ b/src/routes/photos.svelte
@@ -2,12 +2,13 @@
     import { page } from '$app/stores'
     import { browser } from '$app/env'
     import { goto } from '$app/navigation'
-    import { fly } from 'svelte/transition'
     import { getContext, onMount } from 'svelte'
+    import { fade, fly } from 'svelte/transition'
     import { quartOut } from 'svelte/easing'
     import dayjs from 'dayjs'
     import relativeTime from 'dayjs/plugin/relativeTime.js'
     import { map, lerp, throttle } from '$utils/functions'
+    import { DURATION } from '$utils/contants'
     // Components
     import Metas from '$components/Metas.svelte'
     import SplitText from '$components/SplitText.svelte'
diff --git a/src/routes/shop/__layout.svelte b/src/routes/shop/__layout.svelte
index f329b4d..7b132f3 100644
--- a/src/routes/shop/__layout.svelte
+++ b/src/routes/shop/__layout.svelte
@@ -1,6 +1,8 @@
 <script lang="ts">
     import { onMount } from 'svelte'
+    import { fade } from 'svelte/transition'
     import { shopLocations, cartOpen, cartNotifications } from '$utils/stores/shop'
+    import { DURATION } from '$utils/contants'
     // Components
     import Metas from '$components/Metas.svelte'
     import SiteTitle from '$components/atoms/SiteTitle.svelte'
@@ -57,7 +59,10 @@
     image=""
 />
 
-<main class="shop-page">
+<main class="shop-page"
+    in:fade={{ duration: DURATION.PAGE_IN, delay: DURATION.PAGE_OUT }}
+    out:fade={{ duration: DURATION.PAGE_OUT }}
+>
     <Cart />
 
     <section class="shop-page__intro" bind:this={introEl}>
diff --git a/src/routes/subscribe.svelte b/src/routes/subscribe.svelte
index 46cd7ee..4b2afa3 100644
--- a/src/routes/subscribe.svelte
+++ b/src/routes/subscribe.svelte
@@ -1,5 +1,7 @@
 <script lang="ts">
+    import { fade } from 'svelte/transition'
     import dayjs from 'dayjs'
+    import { DURATION } from '$utils/contants'
     // Components
     import Metas from '$components/Metas.svelte'
     import Image from '$components/atoms/Image.svelte'
@@ -16,7 +18,10 @@
     image=""
 />
 
-<main class="subscribe">
+<main class="subscribe"
+    in:fade={{ duration: DURATION.PAGE_IN, delay: DURATION.PAGE_OUT }}
+    out:fade={{ duration: DURATION.PAGE_OUT }}
+>
     <Heading
         text="If you wish to be pinged when new photos are added to and limited prints become available on our shop, sign up below."
     />
diff --git a/src/style/_base.scss b/src/style/_base.scss
index 79df236..14d628d 100644
--- a/src/style/_base.scss
+++ b/src/style/_base.scss
@@ -86,4 +86,26 @@ button {
         display: inline-block;
         transition: opacity 0.7s var(--ease-quart), transform 0.7s var(--ease-quart);
     }
+}
+
+// Mask for animations
+.mask {
+    display: block;
+    overflow: hidden;
+    white-space: nowrap;
+
+    span {
+        display: inline-block;
+    }
+}
+
+// Page loading overlay
+.page-loading {
+    position: fixed;
+    z-index: 2000;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    cursor: wait;
 }
\ No newline at end of file
diff --git a/src/style/pages/_location.scss b/src/style/pages/_location.scss
index 87ac2b6..64760c9 100644
--- a/src/style/pages/_location.scss
+++ b/src/style/pages/_location.scss
@@ -6,7 +6,6 @@
     .location-page__intro {
         position: relative;
         background: $color-primary;
-        // padding-top: clamp(100px, 25vw, 400px);
 
         @include bp (sm) {
             padding-top: clamp(40px, 14vw, 320px);
@@ -154,19 +153,29 @@
         position: absolute;
         z-index: 1;
         top: 0;
-        left: 50%;
+        left: 0;
+        right: 0;
         width: clamp(320px, 100vw, 2560px);
         height: 100%;
-        background: 0 0 var(--illus-mobile) no-repeat;
-        background-size: 100% auto;
-        transform: translate3d(-50%, 0, 0);
+        margin: 0 auto;
+        overflow: hidden;
+        transform-origin: top center;
 
+        div {
+            width: 100%;
+            height: 100%;
+            background: 0 0 var(--illus-mobile) no-repeat;
+            background-size: 100% auto;
+            transform: translate3d(0, var(--parallax-y), 0);
+            transition: transform 0.7s var(--ease-quart);
+            will-change: transform, opacity;
 
-        @include bp (sm) {
-            background-image: var(--illus-desktop);
-        }
-        @include bp (xl) {
-            background-image: var(--illus-desktop-2x);
+            @include bp (sm) {
+                background-image: var(--illus-desktop);
+            }
+            @include bp (xl) {
+                background-image: var(--illus-desktop-2x);
+            }
         }
     }
 
diff --git a/src/utils/contants.ts b/src/utils/contants.ts
index e69de29..ceb2079 100644
--- a/src/utils/contants.ts
+++ b/src/utils/contants.ts
@@ -0,0 +1,10 @@
+// Delays
+export const DELAY = {
+    PAGE_LOADING: 600,
+}
+
+// Durations
+export const DURATION = {
+    PAGE_IN: 400,
+    PAGE_OUT: 400,
+}
\ No newline at end of file
diff --git a/src/utils/stores/index.ts b/src/utils/stores/index.ts
index e69de29..e665323 100644
--- a/src/utils/stores/index.ts
+++ b/src/utils/stores/index.ts
@@ -0,0 +1,3 @@
+import { writable } from 'svelte/store'
+
+export const pageLoading = writable(false)
\ No newline at end of file