From fcb70d4bc0cd938d726965e6168c8bc6a216b1f1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Tue, 23 Nov 2021 23:05:07 +0100
Subject: [PATCH] Add Photos page entering animation

---
 src/routes/photos.svelte | 32 ++++++++++++++++++++++++++++++++
 1 file changed, 32 insertions(+)

diff --git a/src/routes/photos.svelte b/src/routes/photos.svelte
index e51ce66..125b5ee 100644
--- a/src/routes/photos.svelte
+++ b/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) => {