Scope animations

src/utils/Transition.svelte

@@ -20,13 +20,14 @@
     ** 3. Hide the loader with transition Out
     ** 4. The Loader runs the page transition In via pageTransition
     */
+    let scope
     let firstLoad = true
 
     // 1. Watch page change
     page.subscribe(() => {
         // Run the loader animation (only after first load)
         if (!firstLoad && process.browser) {
-            animateIn()
+            animateIn(scope)
         }
         // Set pageReady to false (?)
         pageReady.set(false)
@@ -40,10 +41,11 @@
                 window.scrollTo(0,0)
                 // 3. Hide the loader
                 // Also sets firstLoad to false in order to show the second icon afterwards
-                animateOut(() => firstLoad = false)
-            }, 200) // This duration allows to not come over the transition In
+                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
 
+            // Scroll back to top of page
             // 4. Run the page's transition in, but a little bit before the end of the loader
             setTimeout(() => {
                 pageTransition.onAnimationEnd()
@@ -52,7 +54,7 @@
     })
 </script>
 
-<div class="transition" id="transition" aria-hidden="true">
+<div class="transition" id="transition" aria-hidden="true" bind:this={scope}>
     <div class="loader">
         {#if firstLoad}
         <TitleSite />