Homepage fixes

src/routes/index.svelte

@@ -16,7 +16,9 @@
 
 <script>
     import { onMount } from 'svelte'
-    import { site, currentLocation } from '../store'
+    import { fade } from 'svelte/transition'
+    import { flip } from 'svelte/animate'
+    import { site, currentLocation, currentPhotos } from '../store'
     import * as fn from '../functions'
 
     // Dependencies
@@ -33,8 +35,9 @@
     import Footer from '../molecules/Footer'
 
     // Reset current location if existing
-    $: if ($currentLocation) {
+    $: {
-        currentLocation.set()
+        if ($currentLocation) currentLocation.set()
+        if ($currentPhotos) currentPhotos.set()
     }
 
     // Props and variables
@@ -55,13 +58,13 @@
         const titleHouses = document.getElementById('title-houses')
         const scrollTitleHouses = basicScroll.default.create({
             elem: titleHouses,
-            direct: true,
+            direct: titleHouses,
-            from: '0',
+            from: 0,
             to: window.innerHeight * 0.6,
             props: {
                 '--translateX': {
-                    from: '-7vw',
+                    from: '-3%',
-                    to: '-20vw'
+                    to: '-20%'
                 }
             }
         }).start()
@@ -69,13 +72,13 @@
         const titleWorld = document.getElementById('title-world')
         const scrollTitleWorld = basicScroll.default.create({
             elem: titleWorld,
-            direct: true,
+            direct: titleWorld,
             from: document.querySelector('.explore__description').getBoundingClientRect().top,
             to: document.querySelector('#title-world').getBoundingClientRect().bottom * 1.1,
             props: {
                 '--translateX': {
-                    from: '-1vw',
+                    from: '4%',
-                    to: '-14vw'
+                    to: '-4%'
                 }
             }
         }).start()
@@ -86,48 +89,50 @@
 	<title>Houses Of - Beautiful houses of planet Earth</title>
 </svelte:head>
 
-<section class="intro">
+<div in:fade out:fade>
-    <div class="anim-mask">
+    <section class="intro">
-        <div class="anim title-parallax" id="title-houses" data-aos="letters-translate-top" data-aos-once="true">
+        <div class="anim-mask" in:fade out:fade>
-            <h1 class="title-massive" aria-label="Houses">
+            <div class="anim title-parallax" id="title-houses" data-aos="letters-translate-top" data-aos-once="true">
-                {@html fn.lettersToSpan('Houses')}
+                <h1 class="title-massive" aria-label="Houses">
+                    {@html fn.lettersToSpan('Houses')}
+                </h1>
+            </div>
+        </div>
+
+        <div class="wrap" in:fade out:fade>
+            <div class="intro__description style-description">
+                <p>{$site.description}</p>
+
+                <Button type="a" href="#choose" class="button" text="Explore locations" on:click={e => fn.smoothScroll(e, '#choose')}>
+                    <IconGlobeSmall width="22" color="#666" />
+                </Button>
+            </div>
+        </div>
+
+        <Carousel {photos} />
+    </section>
+
+    <section class="explore explore--homepage">
+        <div class="of" aria-label="of" data-aos="letters-translate-bottom" data-aos-once="true">
+            <div class="anim-mask">
+                {@html fn.lettersToSpan('of')}
+            </div>
+        </div>
+
+        <div class="explore__description style-description" id="choose">
+            <p>{$site.explore_globe}</p>
+        </div>
+
+        <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">
+                {@html fn.lettersToSpan('World')}
             </h1>
         </div>
-    </div>
 
-    <div class="wrap">
+        <Locations />
-        <div class="intro__description style-description">
+    </section>
-            <p>{$site.description}</p>
 
-            <Button type="a" href="#choose" className="button" text="Explore locations" on:click={e => fn.smoothScroll(e, '#choose')}>
+    <Footer />
-                <IconGlobeSmall width="22" color="#666" />
+</div>
-            </Button>
-        </div>
-    </div>
-
-    <Carousel {photos} />
-</section>
-
-<section class="explore explore--homepage">
-    <div class="of" aria-label="of" data-aos="letters-translate-bottom" data-aos-once="true">
-        <div class="anim-mask">
-            {@html fn.lettersToSpan('of')}
-        </div>
-    </div>
-
-    <div class="explore__description style-description" id="choose">
-        <p>{$site.explore_globe}</p>
-    </div>
-
-    <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">
-            {@html fn.lettersToSpan('World')}
-        </h1>
-    </div>
-
-    <Locations />
-</section>
-
-<Footer />