🐛 Setup page transitions

Bugged for some reason, the old page stays before the new page loading at the end
2021-11-17 21:54:22 +01:00
parent 1b181b92fc
commit 8b4070aeb2
12 changed files with 140 additions and 31 deletions
--- 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"
--- 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">
--- 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>
--- 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" />
--- 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"
    />
--- 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'
--- 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}>
--- 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."
    />
--- 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;
 }
--- 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);
+            }
        }
    }

--- 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,
+}
--- 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)