From 6f409c5331b9ac0f220f1c70cb3b1a240dfb4d8e Mon Sep 17 00:00:00 2001
From: Jonathan Boyer <boyer.jonathan@gmail.com>
Date: Wed, 1 Apr 2020 21:28:17 +0200
Subject: [PATCH] fix: first animation & transition

---
 src/animations/place.js     | 1 +
 src/atoms/TitleSite.svelte  | 5 +++--
 src/utils/Transition.svelte | 4 +---
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/animations/place.js b/src/animations/place.js
index 788f8f1..809fcda 100644
--- a/src/animations/place.js
+++ b/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'
     })
 
diff --git a/src/atoms/TitleSite.svelte b/src/atoms/TitleSite.svelte
index 651003f..ae5efb6 100644
--- a/src/atoms/TitleSite.svelte
+++ b/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')}
diff --git a/src/utils/Transition.svelte b/src/utils/Transition.svelte
index 8095fe0..cf41d95 100644
--- a/src/utils/Transition.svelte
+++ b/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()
-            }, animDurationLong * 0.75 + 400) // + 200
+            pageTransition.onAnimationEnd()
         }
     })
 </script>