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/molecules/InteractiveGlobe.svelte

@@ -40,7 +40,7 @@
         // const globe = document.querySelector('.globe img')
         // const places = document.querySelectorAll('.globe .pin--place')
 
-        // // Init function
+        // Init function
         // init = () => {
         //     mapWidth = globe.getBoundingClientRect().width
         //     mapHeight = globe.getBoundingClientRect().height
@@ -59,7 +59,7 @@
         //     init()
         // }
 
-        // // init()
+        // init()
     })
 </script>
 

src/molecules/Location.svelte

@@ -3,7 +3,7 @@
     export let location
 </script>
 
-<div class="location" data-aos="location">
+<div class="location">
     <a href="/location/{location.country.slug}/{location.slug}" rel="prefetch" sapper-noscroll>
         <img src={location.country.flag.full_url} alt="Flag of {location.country.name}">
         <div class="anim-mask mask-city">

src/molecules/Photo.svelte

@@ -3,9 +3,6 @@
     import { fly } from 'svelte/transition'
     import { quartOut } from 'svelte/easing'
     import { site, currentLocation } from '../utils/store'
-
-    // Dependencies
-    import * as basicScroll from 'basicscroll'
     import { getThumbnail, formatDate } from '../utils/functions'
 
     // Props and variables
@@ -29,27 +26,27 @@
 	*/
 	onMount(() => {
         // Parallax on photo when the image has been loaded
-        const parallaxNumber = basicScroll.default.create({
-            elem: photoElement.querySelector('.photo__number'),
-            direct: photoElement,
-            from: 'top-bottom',
-            to: 'bottom-top',
-            props: {
-                '--translate': {
-                    from: '-75%',
-                    to: '-25%'
-                }
-            }
-        })
-        parallaxNumber.start()
-        parallaxNumber.calculate()
-        parallaxNumber.update()
+        // const parallaxNumber = basicScroll.default.create({
+        //     elem: photoElement.querySelector('.photo__number'),
+        //     direct: photoElement,
+        //     from: 'top-bottom',
+        //     to: 'bottom-top',
+        //     props: {
+        //         '--translate': {
+        //             from: '-75%',
+        //             to: '-25%'
+        //         }
+        //     }
+        // })
+        // parallaxNumber.start()
+        // parallaxNumber.calculate()
+        // parallaxNumber.update()
     })
 </script>
 
 <div class="photo"
     bind:this={photoElement}
-    transition:fly="{{ y: 40, duration: 1000, easing: quartOut }}"
+    in:fly="{{ y: 40, duration: 1000, easing: quartOut }}"
 >
     <div class="photo__location wrap">
         <div class="wrapper">