fix: first animation & transition

src/animations/place.js

@@ -9,6 +9,7 @@ import { animDuration } from 'utils/store'
 export const animateIn = () => {
     const tl = anime.timeline({
         duration: 1800,
+        delay: 1800,
         easing: 'easeOutQuart'
     })
 

src/atoms/TitleSite.svelte

@@ -7,18 +7,19 @@
 
     // Variables
     let scope
+    let mounted = false
 
 
     /*
     ** Run code on component mount
     */
     onMount(() => {
-        // Entering transition
+        mounted = true
         animateIn(scope)
     })
 </script>
 
-<div class="title-location title-location--inline" bind:this={scope}>
+<div class="title-location title-location--inline" bind:this={scope} style="opacity: {mounted ? 1 : 0}">
     <div role="heading" aria-level="1" aria-label="Houses">
         <div class="anim-mask">
             {@html charsToSpan('Houses')}

src/utils/Transition.svelte

@@ -62,9 +62,7 @@
             }, animDurationLong * 0.75 + 400)
 
             // 4. Run the page's transition in, but a little bit before the end of the loader
-            setTimeout(() => {
+            pageTransition.onAnimationEnd()
-                pageTransition.onAnimationEnd()
-            }, animDurationLong * 0.75 + 400) // + 200
         }
     })
 </script>