WIP attempt to fix page transitions, Several edits

src/utils/AnalyticsTracker.svelte

@@ -23,5 +23,7 @@
 </script>
 
 <svelte:head>
+    {#if process.env.NODE_ENV !== 'development'}
     <script async src="https://www.googletagmanager.com/gtag/js?id={id}"></script>
+    {/if}
 </svelte:head>

src/utils/Transition.svelte

@@ -1,6 +1,12 @@
 <script>
     import { stores } from '@sapper/app'
-    import { pageReady, animDurationLong, pageTransition } from './store'
+    import {
+        pageReady,
+        pageTransition,
+        transitionLong,
+        transitionPanelIn,
+        transitionDelay
+    } from './store'
     const { page } = stores()
 
     // Components
@@ -11,6 +17,9 @@
     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
@@ -24,21 +33,16 @@
     let firstLoad = true
     let previousPage = ''
 
-    // Check if viewer
-    const isExcluded = path => path.includes(['/viewer/'])
-
     // 1. Watch page change
     page.subscribe(page => {
         // Run transition if page is not excluded
         if (!isExcluded(previousPage) || !isExcluded(page.path)) {
-            // Run the loader animation (only after first load)
+            // Run the loader animation (first load only)
             if (!firstLoad) {
                 animateIn(scope)
             }
 
-            // TODO: Figure out how to delay the page rendering a little bit before the end of the transition panel ending
-
-            // Set pageReady to false (?)
+            // Reset pageReady when changing page
             pageReady.set(false)
         }
 
@@ -49,19 +53,13 @@
     // 2. Watch when loaded changes
     pageReady.subscribe(loaded => {
         if (loaded) {
-            // 3. Hide the loader
-            setTimeout(() => {
-                // Also sets firstLoad to false in order to show the second icon afterwards
-                animateOut(scope, () => firstLoad = false)
-            }, 400) // This duration allows to not come over the transition In
-            // [OU ALORS] les pages changent la valeur de loaded plus tard
+            // 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)
-            }, animDurationLong * 0.75 + 400)
+            setTimeout(() => window.scrollTo(0,0), transitionDelay)
 
-            // 4. Run the page's transition in, but a little bit before the end of the loader
+            // 4. Run page entering animation
             pageTransition.onAnimationEnd()
         }
     })
@@ -70,7 +68,7 @@
 <div class="transition" id="transition" aria-hidden="true" bind:this={scope}>
     <div class="transition__loader">
         {#if firstLoad}
-        <TitleSite />
+        <TitleSite init="true" />
 
         {:else}
         <IconGlobe width="44" color="#fff" animated="true" />

src/utils/functions.js

@@ -163,15 +163,17 @@ export const relativeTime = (originDate, limit = 0) => {
 ** Controls Anime.js parallax
 */
 export const parallaxAnime = (element, anime) => {
-    const bound = element.getBoundingClientRect()
-    const windowHeight = window.innerHeight
-    if (bound.top < windowHeight && bound.bottom > 0) {
-        anime.seek(anime.duration * ((windowHeight - bound.top) / (windowHeight + bound.height)).toFixed(3))
-    } else {
-        if (bound.top >= windowHeight) {
-            anime.seek(0)
-        } else if (bound.bottom <= 0) {
-            anime.seek(anime.duration)
+    if (element) {
+        const bound = element.getBoundingClientRect()
+        const windowHeight = window.innerHeight
+        if (bound.top < windowHeight && bound.bottom > 0) {
+            anime.seek(anime.duration * ((windowHeight - bound.top) / (windowHeight + bound.height)).toFixed(3))
+        } else {
+            if (bound.top >= windowHeight) {
+                anime.seek(0)
+            } else if (bound.bottom <= 0) {
+                anime.seek(anime.duration)
+            }
         }
     }
 }

src/utils/store.js

@@ -35,5 +35,7 @@ export let fullscreen = writable()
 /* ==========================================================================
    Animation related
 ========================================================================== */
-export const animDuration = 1400
-export const animDurationLong = 1800
+export const transitionDelay = 1400
+export const transitionNormal = 1400
+export const transitionLong = 1800
+export const transitionPanelIn = 700