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,
-            from: '0',
+            direct: titleHouses,
+            from: 0,
             to: window.innerHeight * 0.6,
             props: {
                 '--translateX': {
-                    from: '-7vw',
-                    to: '-20vw'
+                    from: '-3%',
+                    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',
-                    to: '-14vw'
+                    from: '4%',
+                    to: '-4%'
                 }
             }
         }).start()
@@ -86,8 +89,9 @@
 	<title>Houses Of - Beautiful houses of planet Earth</title>
 </svelte:head>
 
+<div in:fade out:fade>
     <section class="intro">
-    <div class="anim-mask">
+        <div class="anim-mask" in:fade out:fade>
             <div class="anim title-parallax" id="title-houses" data-aos="letters-translate-top" data-aos-once="true">
                 <h1 class="title-massive" aria-label="Houses">
                     {@html fn.lettersToSpan('Houses')}
@@ -95,11 +99,11 @@
             </div>
         </div>
 
-    <div class="wrap">
+        <div class="wrap" in:fade out:fade>
             <div class="intro__description style-description">
                 <p>{$site.description}</p>
 
-            <Button type="a" href="#choose" className="button" text="Explore locations" on:click={e => fn.smoothScroll(e, '#choose')}>
+                <Button type="a" href="#choose" class="button" text="Explore locations" on:click={e => fn.smoothScroll(e, '#choose')}>
                     <IconGlobeSmall width="22" color="#666" />
                 </Button>
             </div>
@@ -131,3 +135,4 @@
     </section>
 
     <Footer />
+</div>