Add parallax and reveal effects + performances on transitions

src/molecules/InteractiveGlobe.svelte

@@ -1,3 +1,8 @@
+<script>
+    // Idea: https://codepen.io/edankwan/pen/emqgpr
+    // Idea 2: ThreeJS globe: https://github.com/vasturiano/globe.gl
+</script>
+
 <div class="globe">
     <div class="wrap">
         <img src="/img/globe.png" alt="">

src/molecules/Photo.svelte

@@ -1,8 +1,11 @@
 <script>
+    import { onMount } from 'svelte'
     import { site, currentLocation } from '../store'
     import * as fn from '../functions'
 
     // Dependencies
+    import AOS from 'aos'
+    import * as basicScroll from 'basicscroll'
     import dayjs from 'dayjs'
     import advancedFormat from 'dayjs/plugin/advancedFormat'
     dayjs.extend(advancedFormat)
@@ -14,6 +17,33 @@
     // Shortcut current location
     let location
     $: location = $currentLocation.location
+
+
+    /*
+	** Run code on browser only
+	*/
+	onMount(() => {
+		// Scroll apparitions
+		if (process.browser) {
+			AOS.init()
+        }
+
+        // Parallax on photos
+		document.querySelectorAll('.photos .photo').forEach(photo => {
+			const parallaxNumber = basicScroll.default.create({
+				elem: photo.querySelector('.photo__image--number'),
+				direct: true,
+				from: photo.getBoundingClientRect().top * 0.25,
+				to: photo.getBoundingClientRect().bottom * 0.92,
+				props: {
+					'--translate': {
+						from: '-75%',
+						to: '-25%'
+					}
+				}
+			}).start()
+		})
+    })
 </script>
 
 <div class="photo">
@@ -32,13 +62,15 @@
                     <source media="(min-width: 768px)" srcset={fn.getThumbnail(photo.image.private_hash, 992)}>
                     <source media="(min-width: 500px)" srcset={fn.getThumbnail(photo.image.private_hash, 650)}>
                     <source media="(min-width: 300px)" srcset={fn.getThumbnail(photo.image.private_hash, 400)}>
-                    <img src="{fn.getThumbnail(photo.image.private_hash, 900)}" alt="{photo.name}, {location.region}, {location.country.name}">
+                    <img src="{fn.getThumbnail(photo.image.private_hash, 900)}" alt="{photo.name}, {location.region}, {location.country.name}"
+                        data-aos="scale-down-fade-in"
+                    >
                 </picture>
-                <time class="photo__image--date" datetime={dayjs(photo.date).format('YYYY-MM-DDThh:mm:ss')}>
-                    {dayjs(photo.date).format('MMM Do, YYYY')}
-                </time>
-                <span class="photo__image--number">{(index < 10 ? '0': '') + index}</span>
             </a>
+            <time class="photo__image--date" datetime={dayjs(photo.date).format('YYYY-MM-DDThh:mm:ss')}>
+                {dayjs(photo.date).format('MMM Do, YYYY')}
+            </time>
+            <span class="photo__image--number">{(index < 10 ? '0': '') + index}</span>
         </div>
     </div>
 </div>