From 54682c688648c5374344dd60851f73fb4290865e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Tue, 12 Nov 2024 15:10:18 +0100
Subject: [PATCH] fix: move pages animation to onMount

---
 .../organisms/ShopBanner/ShopBanner.svelte    |  15 ++-
 .../(site)/[country]/[location]/+page.svelte  |  17 ++-
 .../[country]/[location]/[photo]/+page.svelte |   4 +-
 .../src/routes/(site)/about/+page.svelte      | 124 +++++++++---------
 .../src/routes/(site)/credits/+page.svelte    |   3 +-
 .../src/routes/(site)/subscribe/+page.svelte  |   3 +-
 apps/website/src/routes/+page.svelte          |   4 +-
 7 files changed, 90 insertions(+), 80 deletions(-)

diff --git a/apps/website/src/components/organisms/ShopBanner/ShopBanner.svelte b/apps/website/src/components/organisms/ShopBanner/ShopBanner.svelte
index 5e32b92..9cca0f7 100644
--- a/apps/website/src/components/organisms/ShopBanner/ShopBanner.svelte
+++ b/apps/website/src/components/organisms/ShopBanner/ShopBanner.svelte
@@ -2,7 +2,7 @@
 
 <script lang="ts">
     import { navigating } from '$app/stores'
-    import { getContext } from 'svelte'
+    import { getContext, onMount } from 'svelte'
     import { stagger, timeline } from 'motion'
     import { smoothScroll } from '$utils/stores'
     import { cartOpen } from '$utils/stores/shop'
@@ -44,7 +44,14 @@
             navChooseEl.scrollLeft = offsetLeft
         }
 
+        // Destroy
+        return () => {
+            navObserver && navObserver.disconnect()
+        }
+    })
 
+
+    onMount(() => {
         /**
          * Animations
          */
@@ -95,12 +102,6 @@
 
         // Run animation
         requestAnimationFrame(animation.play)
-
-
-        // Destroy
-        return () => {
-            navObserver && navObserver.disconnect()
-        }
     })
 </script>
 
diff --git a/apps/website/src/routes/(site)/[country]/[location]/+page.svelte b/apps/website/src/routes/(site)/[country]/[location]/+page.svelte
index 61830a5..2a7e04d 100644
--- a/apps/website/src/routes/(site)/[country]/[location]/+page.svelte
+++ b/apps/website/src/routes/(site)/[country]/[location]/+page.svelte
@@ -3,6 +3,7 @@
 <script lang="ts">
     import { PUBLIC_LIST_INCREMENT } from '$env/static/public'
     import { page, navigating } from '$app/stores'
+    import { onMount } from 'svelte'
     import { scroll, stagger, timeline } from 'motion'
     import dayjs from 'dayjs'
     import relativeTime from 'dayjs/plugin/relativeTime'
@@ -144,6 +145,15 @@
         })
 
 
+        // Destroy
+        return () => {
+            observerPhotos && observerPhotos.disconnect()
+            mutationPhotos && mutationPhotos.disconnect()
+        }
+    })
+
+
+    onMount(() => {
         /**
          * Animations
          */
@@ -192,13 +202,6 @@
 
         // Run animation
         requestAnimationFrame(animation.play)
-
-
-        // Destroy
-        return () => {
-            observerPhotos && observerPhotos.disconnect()
-            mutationPhotos && mutationPhotos.disconnect()
-        }
     })
 </script>
 
diff --git a/apps/website/src/routes/(site)/[country]/[location]/[photo]/+page.svelte b/apps/website/src/routes/(site)/[country]/[location]/[photo]/+page.svelte
index 4fe29ec..7eb9e8e 100644
--- a/apps/website/src/routes/(site)/[country]/[location]/[photo]/+page.svelte
+++ b/apps/website/src/routes/(site)/[country]/[location]/[photo]/+page.svelte
@@ -3,7 +3,7 @@
 <script lang="ts">
     import { page, navigating } from '$app/stores'
     import { goto } from '$app/navigation'
-    import { tick } from 'svelte'
+    import { onMount, tick } from 'svelte'
     import { fade, scale } from 'svelte/transition'
     import { quartOut } from 'svelte/easing'
     import dayjs from 'dayjs'
@@ -216,7 +216,7 @@
     }
 
 
-    $effect(() => {
+    onMount(() => {
         /**
          * Animations
          */
diff --git a/apps/website/src/routes/(site)/about/+page.svelte b/apps/website/src/routes/(site)/about/+page.svelte
index 5ca9332..4bf8eb7 100644
--- a/apps/website/src/routes/(site)/about/+page.svelte
+++ b/apps/website/src/routes/(site)/about/+page.svelte
@@ -18,6 +18,7 @@
     import AboutGridPhoto from '$components/atoms/AboutGridPhoto.svelte'
     import ProcessStep from '$components/molecules/ProcessStep/ProcessStep.svelte'
     import Banner from '$components/organisms/Banner/Banner.svelte'
+    import { onMount } from 'svelte';
 
     let { data } = $props()
 
@@ -43,66 +44,6 @@
             offset: ['start end', 'end start']
         })
 
-        /**
-         * Animations
-         */
-        const animation = timeline([
-            // Banner
-            ['.banner picture', {
-                scale: [1.06, 1],
-                opacity: [0, 1],
-                z: 0,
-            }, {
-                at: 0.4,
-                duration: 2.4,
-            }],
-            ['.banner h1', {
-                y: [32, 0],
-                opacity: [0, 1],
-            }, {
-                at: 0.5,
-            }],
-            ['.banner__top > *', {
-                y: [-100, 0],
-                opacity: [0, 1],
-            }, {
-                at: 0.4,
-                delay: stagger(0.25),
-            }],
-
-            // Intro elements
-            ['.about__introduction .container > *', {
-                y: ['20%', 0],
-                opacity: [0, 1],
-                z: 0,
-            }, {
-                at: 0.75,
-                delay: stagger(0.25),
-            }],
-            ['.first-photo', {
-                y: ['10%', 0],
-                opacity: [0, 1],
-                z: 0,
-            }, {
-                at: 1.2,
-            }],
-            ['.first-photo img', {
-                scale: [1.06, 1],
-                opacity: [0, 1],
-                z: 0,
-            }, {
-                at: 1.5,
-                duration: 2.4,
-            }],
-        ], {
-            delay: $navigating ? DELAY.PAGE_LOADING / 1000 : 0,
-            defaultOptions: {
-                duration: 1.6,
-                easing: quartOut,
-            },
-        })
-        animation.stop()
-
         // Sections
         inView('[data-reveal]', ({ target }) => {
             animate(target, {
@@ -163,6 +104,69 @@
         }, {
             amount: 0.35,
         })
+    })
+
+
+    onMount(() => {
+        /**
+         * Animations
+         */
+         const animation = timeline([
+            // Banner
+            ['.banner picture', {
+                scale: [1.06, 1],
+                opacity: [0, 1],
+                z: 0,
+            }, {
+                at: 0.4,
+                duration: 2.4,
+            }],
+            ['.banner h1', {
+                y: [32, 0],
+                opacity: [0, 1],
+            }, {
+                at: 0.5,
+            }],
+            ['.banner__top > *', {
+                y: [-100, 0],
+                opacity: [0, 1],
+            }, {
+                at: 0.4,
+                delay: stagger(0.25),
+            }],
+
+            // Intro elements
+            ['.about__introduction .container > *', {
+                y: ['20%', 0],
+                opacity: [0, 1],
+                z: 0,
+            }, {
+                at: 0.75,
+                delay: stagger(0.25),
+            }],
+            ['.first-photo', {
+                y: ['10%', 0],
+                opacity: [0, 1],
+                z: 0,
+            }, {
+                at: 1.2,
+            }],
+            ['.first-photo img', {
+                scale: [1.06, 1],
+                opacity: [0, 1],
+                z: 0,
+            }, {
+                at: 1.5,
+                duration: 2.4,
+            }],
+        ], {
+            delay: $navigating ? DELAY.PAGE_LOADING / 1000 : 0,
+            defaultOptions: {
+                duration: 1.6,
+                easing: quartOut,
+            },
+        })
+        animation.stop()
 
         // Run animation
         requestAnimationFrame(animation.play)
diff --git a/apps/website/src/routes/(site)/credits/+page.svelte b/apps/website/src/routes/(site)/credits/+page.svelte
index 425fcc5..80b61fa 100644
--- a/apps/website/src/routes/(site)/credits/+page.svelte
+++ b/apps/website/src/routes/(site)/credits/+page.svelte
@@ -2,6 +2,7 @@
 
 <script lang="ts">
     import { navigating } from '$app/stores'
+    import { onMount } from 'svelte'
     import { stagger, timeline } from 'motion'
     import { DELAY } from '$utils/constants'
     import { quartOut } from 'svelte/easing'
@@ -15,7 +16,7 @@
     const { credit } = data
 
 
-    $effect(() => {
+    onMount(() => {
         /**
          * Animations
          */
diff --git a/apps/website/src/routes/(site)/subscribe/+page.svelte b/apps/website/src/routes/(site)/subscribe/+page.svelte
index 7bef624..545323c 100644
--- a/apps/website/src/routes/(site)/subscribe/+page.svelte
+++ b/apps/website/src/routes/(site)/subscribe/+page.svelte
@@ -2,6 +2,7 @@
 
 <script lang="ts">
     import { navigating } from '$app/stores'
+    import { onMount } from 'svelte'
     import { stagger, timeline } from 'motion'
     import { DELAY } from '$utils/constants'
     import { quartOut } from '$animations/easings'
@@ -17,7 +18,7 @@
     const latestIssue = $derived(data.issues[0])
 
 
-    $effect(() => {
+    onMount(() => {
         /**
          * Animations
          */
diff --git a/apps/website/src/routes/+page.svelte b/apps/website/src/routes/+page.svelte
index 3d4a24d..bc241e9 100644
--- a/apps/website/src/routes/+page.svelte
+++ b/apps/website/src/routes/+page.svelte
@@ -2,7 +2,7 @@
 
 <script lang="ts">
     import { navigating } from '$app/stores'
-    import { getContext } from 'svelte'
+    import { getContext, onMount } from 'svelte'
     import { timeline, stagger } from 'motion'
     import { DELAY } from '$utils/constants'
     import { smoothScroll } from '$utils/stores'
@@ -32,7 +32,7 @@
     let innerHeight = $state<number>()
 
 
-    $effect(() => {
+    onMount(() => {
         /**
          * Animations
          */