TitleSite: Fix longer delay after first transition

src/animations/TitleSite.js

@@ -1,7 +1,9 @@
 import anime from 'animejs'
 import ScrollOut from 'scroll-out'
-import { animDelay } from 'utils/store'
+import { firstLoad, animDurationLong, animDelay } from 'utils/store'
 
+let firstLoadValue
+firstLoad.subscribe(store => firstLoadValue = store)
 
 /*
 ** Transition In
@@ -14,7 +16,7 @@ export const animateIn = (scope, init) => {
         translateZ: [0, 0],
         easing: 'easeOutQuart',
         duration: 1000,
-        delay: anime.stagger(40, { start: init ? 0 : animDelay }),
+        delay: anime.stagger(40, { start: init ? 0 : (firstLoadValue) ? animDurationLong : animDelay }),
         autoplay: false
     })
 
@@ -22,6 +24,9 @@ export const animateIn = (scope, init) => {
     const title = ScrollOut({
         once: true,
         targets: scope,
-        onShown: () => letters.restart()
+        onShown: () => {
+            console.log('TitleSite show')
+            letters.restart()
+        }
     })
 }

src/utils/Transition.svelte

@@ -5,9 +5,11 @@
     import {
         pageReady,
         pageAnimation,
+        firstLoad,
         animDuration,
         animDelay,
-        animPanelDelay
+        animPanelDelay,
+        animPanelShortDelay
     } from 'utils/store'
     // Components
     import TitleSite from 'atoms/TitleSite'
@@ -20,7 +22,6 @@
     $: animateIn = $pageAnimation
     let scope
     let show = false
-    let firstLoad = true
     let previousPage = ''
 
     // Check if path is excluded
@@ -31,7 +32,9 @@
         // Show transition if page is not excluded
         if (!isExcluded(previousPage) || !isExcluded(page.path)) {
             pageReady.set(false)
-            process.browser && requestAnimationFrame(() => show = false)
+            process.browser && requestAnimationFrame(() => {
+                show = false
+            })
         }
 
         // Update page for viewer navigation checking
@@ -45,12 +48,12 @@
                 // Show transition
                 show = true
                 // Run the page animation
-                process.browser && requestAnimationFrame(() => animateIn())
+                process.browser && requestAnimationFrame(animateIn)
                 // Change loader icon as the loader shown already
-                firstLoad = false
+                firstLoad.set(false)
                 // Scroll to page top
                 window.scrollTo(0,0)
-            }, firstLoad ? animPanelDelay : 600)
+            }, $firstLoad ? animPanelDelay : animPanelShortDelay)
         }
     })
 </script>
@@ -61,7 +64,7 @@
         in:fly={{ y: 24, duration: 800, easing: quartOut }}
         out:fly={{ y: -window.innerHeight/2, duration: animDuration, easing: quartInOut }}
     >
-        {#if firstLoad}
+        {#if $firstLoad}
         <TitleSite init={true} />
         {:else}
         <IconGlobe width="44" color="#fff" animated="true" />

src/utils/store.js

@@ -24,15 +24,17 @@ export let currentLocation = writable()
 export let currentPhotos = writable()
 
 // State
-export let pageReady = writable(false, () => {})
 export let fullscreen = writable(undefined, () => {})
 
 
 /* ==========================================================================
    Animation related
 ========================================================================== */
+export let firstLoad = writable(true, () => {})
+export let pageReady = writable(false, () => {})
 export let pageAnimation = writable(() => {}, () => {})
 export const animDelay = 900
 export const animPanelDelay = 900
+export const animPanelShortDelay = 600
 export const animDuration = 1400
 export const animDurationLong = 1800