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/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">