WIP Animations all over site

- Run a transition In for each page
- Involve a "loader" panel on page change
- TODO: tweak the animations and finish the concept

src/routes/index.svelte

@@ -1,7 +1,5 @@
 <script context="module">
-	import {
-        apiEndpoints,
-    } from '../utils/store'
+	import { apiEndpoints } from '../utils/store'
 
 	// Preload data
 	export async function preload (page, session) {
@@ -18,12 +16,16 @@
 
 <script>
     import { onMount } from 'svelte'
-    import { site, currentLocation, currentPhotos } from '../utils/store'
+    import {
+        site,
+        currentLocation,
+        currentPhotos,
+        pageReady,
+        pageTransition
+    } from '../utils/store'
     import { lettersToSpan } from '../utils/functions'
 
     // Dependencies
-    import * as basicScroll from 'basicscroll'
-    import AOS from 'aos'
     import zenscroll from 'zenscroll'
 
     // Components
@@ -35,6 +37,14 @@
     import Locations from '../organisms/Locations'
     import Footer from '../organisms/Footer'
     import SocialMetas from '../utils/SocialMetas'
+    import Transition from '../utils/Transition'
+
+    // Animations
+    import { animateIn } from '../animations/index'
+    pageTransition.onAnimationEnd = animateIn
+
+    // Props and variables
+    export let photos
 
     // Reset current location if existing
     $: {
@@ -42,48 +52,13 @@
         if ($currentPhotos) currentPhotos.set()
     }
 
-    // Props and variables
-    export let photos
-    let appearing
-
 
     /*
-    ** Run code on browser only
+    ** Run code when mounted
     */
     onMount(() => {
-        if (process.browser) {
-            // Scroll apparitions
-            AOS.init()
-
-            // Parallax titles
-            const titleHouses = document.getElementById('title-houses')
-            const scrollTitleHouses = basicScroll.default.create({
-                elem: titleHouses,
-                direct: titleHouses,
-                from: 0,
-                to: window.innerHeight * 0.6,
-                props: {
-                    '--translateX': {
-                        from: '-3%',
-                        to: '-20%'
-                    }
-                }
-            }).start()
-
-            const titleWorld = document.getElementById('title-world')
-            const scrollTitleWorld = basicScroll.default.create({
-                elem: titleWorld,
-                direct: titleWorld,
-                from: document.querySelector('.explore__description').getBoundingClientRect().top,
-                to: document.querySelector('#title-world').getBoundingClientRect().bottom * 1.1,
-                props: {
-                    '--translateX': {
-                        from: '4%',
-                        to: '-4%'
-                    }
-                }
-            }).start()
-        }
+        // Page is loaded
+        pageReady.set(true)
     })
 </script>
 
@@ -100,14 +75,14 @@
 
 <section class="intro">
     <div class="anim-mask">
-        <div class="anim title-parallax" id="title-houses" data-aos="letters-translate-top" data-aos-once="true">
+        <div class="anim title-parallax" id="title-houses">
             <h1 class="title-massive" aria-label="Houses">
                 {@html lettersToSpan('Houses')}
             </h1>
         </div>
     </div>
 
-    <div class="wrap">
+    <div class="wrap" id="intro-description">
         <div class="intro__description style-description">
             <p>{$site.description}</p>
 
@@ -117,11 +92,13 @@
         </div>
     </div>
 
-    <Carousel {photos} />
+    <div id="intro-carousel">
+        <Carousel {photos} />
+    </div>
 </section>
 
 <section class="explore explore--homepage">
-    <div class="of" aria-label="of" data-aos="letters-translate-bottom" data-aos-once="true">
+    <div class="of" id="title-of" aria-label="of">
         <div class="anim-mask">
             {@html lettersToSpan('of')}
         </div>
@@ -134,7 +111,7 @@
     <InteractiveGlobe />
 
     <div class="anim-mask anim-title">
-        <h1 class="title-massive title-parallax" id="title-world" aria-label="World" data-aos="letters-translate-bottom" data-aos-once="true">
+        <h1 class="title-massive title-parallax" id="title-world" aria-label="World">
             {@html lettersToSpan('World')}
         </h1>
     </div>