Add Photos page entering animation

src/routes/photos.svelte

@@ -6,6 +6,7 @@
     import { quartOut } from 'svelte/easing'
     import dayjs from 'dayjs'
     import relativeTime from 'dayjs/plugin/relativeTime.js'
+    import anime from 'animejs'
     import { map, lerp, throttle } from '$utils/functions'
     import { DURATION } from '$utils/contants'
     // Components
@@ -240,6 +241,37 @@
 
 
     onMount(() => {
+        /**
+         * Entering animation
+         */
+        const timeline = anime.timeline({
+            duration: 1600,
+            easing: 'easeOutQuart',
+        })
+
+        // Reveal text
+        timeline.add({
+            targets: '.photos__intro .discover',
+            translateY: [16, 0],
+            opacity: [0, 1],
+        }, 900)
+
+        // Filters
+        timeline.add({
+            targets: '.photos__intro .filter',
+            translateY: [16, 0],
+            opacity: [0, 1],
+            complete ({ animatables }) {
+                const element = animatables[0].target
+                // Remove style to not interfere with CSS when scrolling back up over photos
+                element.removeAttribute('style')
+            }
+        }, 1300)
+
+
+        /**
+         * Observers
+         */
         // Photos IntersectionObserver
         observerPhotos = new IntersectionObserver(entries => {
             entries.forEach(({ isIntersecting, target }: IntersectionObserverEntry) => {