Add transitions to missing pages and attempt to animate it better?

src/routes/subscribe.svelte

@@ -1,5 +1,9 @@
 <script lang="ts">    import { fade } from 'svelte/transition'
+    import { browser } from '$app/env'
+    import { onMount } from 'svelte'
     import dayjs from 'dayjs'
+    import anime from 'animejs'
+    import type { AnimeTimelineInstance } from 'animejs'
     // Components
     import Metas from '$components/Metas.svelte'
     import Image from '$components/atoms/Image.svelte'
@@ -7,7 +11,56 @@
     import InteractiveGlobe from '$components/organisms/InteractiveGlobe.svelte';
     import EmailForm from '$components/molecules/EmailForm.svelte';
 
+    export let data: any
     export let issues: any
+
+
+
+    /**
+     * Transition: Anime timeline
+     */
+     let timeline: AnimeTimelineInstance
+
+    if (browser) {
+        requestAnimationFrame(() => {
+            // Setup animations
+            timeline = anime.timeline({
+                duration: 1600,
+                easing: 'easeOutQuart',
+                autoplay: false,
+            })
+
+            anime.set('.subscribe__top > *, .subscribe__issues', {
+                opacity: 0,
+                translateY: 24,
+            })
+
+            // Elements
+            timeline.add({
+                targets: '.subscribe__top > *, .subscribe__issues',
+                opacity: 1,
+                translateY: 0,
+                delay: anime.stagger(200),
+            }, 500)
+
+            // Reveal each issue
+            timeline.add({
+                targets: '.subscribe__issues .issue',
+                opacity: [0, 1],
+                translateY: [16, 0],
+                delay: anime.stagger(150),
+                duration: 1000,
+            }, 1000)
+        })
+    }
+
+
+    onMount(() => {
+        // Transition in
+        requestAnimationFrame(() => {
+            timeline.play()
+        })
+    })
 </script>
 
 <Metas
@@ -17,11 +70,13 @@
 />
 
 <main class="subscribe">
-    <Heading
-        text="If you wish to be pinged when new photos are added to and limited prints become available on our shop, sign up below."
-    />
+    <div class="subscribe__top">
+        <Heading
+            text={data.newsletter_page_text}
+        />
 
-    <EmailForm />
+        <EmailForm />
+    </div>
 
     <section class="subscribe__issues">
         <h2 class="title-small">Past Issues</h2>
@@ -58,6 +113,10 @@
     export async function load ({ page, fetch, session, stuff }) {
         const res = await fetchAPI(`
             query {
+                settings {
+                    newsletter_page_text
+                }
+
                 newsletter (limit: -1, sort: "-issue") {
                     issue
                     title
@@ -72,6 +131,7 @@
 
         return {
             props: {
+                data: data.settings,
                 issues: data.newsletter,
             }
         }