⚠️ Rework completely how transitions works

- Use Svelte/Sapper native if and transitions to show either the page content or the loader, then load each page animationIn
- Code is safe on SSR side, using process.browser on this if
- The <main> element is on position absolute to fade nicely the different pages
- Code cleaning

src/utils/Transition.svelte

@@ -1,78 +1,54 @@
 <script>
+    import { onMount } from 'svelte'
+    import { fly, fade } from 'svelte/transition'
+    import { quartInOut, quartOut } from 'svelte/easing'
     import { stores } from '@sapper/app'
-    import {
-        pageReady,
-        pageTransition,
-        transitionLong,
-        transitionPanelIn,
-        transitionDelay
-    } from './store'
+    import { pageReady, firstLoad } from 'utils/store'
     const { page } = stores()
 
+    // Animations
+    import { panelBackgroundOut } from 'animations/Transition'
+
     // Components
     import TitleSite from 'atoms/TitleSite'
     import IconGlobe from 'atoms/IconGlobe'
 
-    // Animations
-    import { animateIn, animateOut } from 'animations/Transition'
-
-
-    // Check if path is excluded
-    const isExcluded = path => path.includes(['/viewer/'])
-
-    /*
-    ** PAGE LOADING PROCESS
-    ** 1. Set pageReady to false
-    ** 1. Runs the Loader transition In
-    ** ?. The next page changes the value of pageReady when mounted (or later)
-    ** 2. The Loader detects the value change of pageReady
-    ** 3. Hide the loader with transition Out
-    ** 4. The Loader runs the page transition In via pageTransition
-    */
+    // Props and Variables
+    export let animateIn = scope => {}
     let scope
-    let firstLoad = true
-    let previousPage = ''
+    let show = false
 
-    // 1. Watch page change
-    page.subscribe(page => {
-        // Run transition if page is not excluded
-        if (!isExcluded(previousPage) || !isExcluded(page.path)) {
-            // Run the loader animation (first load only)
-            if (!firstLoad) {
-                animateIn(scope)
-            }
 
-            // Reset pageReady when changing page
-            pageReady.set(false)
-        }
-
-        // Update page for viewer navigation checking
-        previousPage = page.path
-    })
-
-    // 2. Watch when loaded changes
+    // Listen for when a route is mounted
     pageReady.subscribe(loaded => {
         if (loaded) {
-            // 3. Hide the loader and set firstLoad to false (in order to show the second icon afterwards)
-            animateOut(scope, () => firstLoad = false)
-
-            // Scroll back to top of page
-            setTimeout(() => window.scrollTo(0,0), transitionDelay)
-
-            // 4. Run page entering animation
-            pageTransition.onAnimationEnd()
+            setTimeout(() => {
+                show = true
+                firstLoad.set(false)
+                setTimeout(() => animateIn(scope), 1)
+            }, 1000)
         }
     })
 </script>
 
-<div class="transition" id="transition" aria-hidden="true" bind:this={scope}>
-    <div class="transition__loader">
-        {#if firstLoad}
-        <TitleSite init="true" />
+{#if show || !process.browser}
+<slot></slot>
 
+{:else}
+<div class="transition" id="transition" aria-hidden="true" bind:this={scope}>
+    <div class="transition__loader"
+        in:fly={{ y: 24, duration: 800, easing: quartOut }}
+        out:fly={{ y: -window.innerHeight/2, duration: 1400, easing: quartInOut }}
+    >
+        {#if $firstLoad}
+        <TitleSite />
         {:else}
         <IconGlobe width="44" color="#fff" animated="true" />
         {/if}
     </div>
-    <div class="transition__background" />
+    <div class="transition__background"
+        in:fade={{ duration: 600, easing: quartInOut }}
+        out:panelBackgroundOut={{ duration: 1400 }}
+    />
 </div>
+{/if}

src/utils/store.js

@@ -1,4 +1,3 @@
-// Svelte
 import { writable } from 'svelte/store'
 
 // Define environment
@@ -25,17 +24,14 @@ export let currentLocation = writable()
 export let currentPhotos = writable()
 
 // State
-export let pageReady = writable(false)
-export const pageTransition = {
-   onAnimationEnd () {}
-}
+export let pageReady = writable(false, () => {})
+export let firstLoad = writable(true)
 export let fullscreen = writable()
 
 
 /* ==========================================================================
    Animation related
 ========================================================================== */
-export const transitionDelay = 1400
-export const transitionNormal = 1400
-export const transitionLong = 1800
-export const transitionPanelIn = 700
+export const animDelay = 800
+export const animDuration = 1400
+export const animDurationLong = 1800