Run page animations onMount instead of browser

src/routes/shop/[type]-[name].svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-    import { browser } from '$app/env'
     import { getContext, onMount } from 'svelte'
     import anime from 'animejs'
     import type { AnimeTimelineInstance } from 'animejs'
@@ -25,44 +24,6 @@
     let scrolledPastIntro = false
 
 
-    /**
-     * Transition: Anime timeline
-     */
-    let timeline: AnimeTimelineInstance
-
-    if (browser) {
-        requestAnimationFrame(() => {
-            timeline = anime.timeline({
-                duration: 1600,
-                easing: 'easeOutQuart',
-                autoplay: false,
-            })
-
-            // Hero image
-            timeline.add({
-                targets: '.shop-page__background',
-                scale: [1.06, 1],
-                opacity: [0, 1],
-                duration: 2400,
-            }, 400)
-
-            // Intro top elements
-            timeline.add({
-                targets: '.shop-page__intro .top > *',
-                translateY: [-100, 0],
-                delay: anime.stagger(250),
-            }, 400)
-
-            // Intro navbar
-            timeline.add({
-                targets: '.shop-page__nav .container > *',
-                translateY: [100, 0],
-                delay: anime.stagger(250),
-            }, 700)
-        })
-    }
-
-
     onMount(() => {
         // Reveal the nav past the Intro
         navObserver = new IntersectionObserver(entries => {
@@ -75,11 +36,42 @@
         })
         navObserver.observe(introEl)
 
-        // Transition in
-        requestAnimationFrame(() => {
-            timeline.play()
+
+        /**
+         * Animations
+         */
+        // Setup animations
+        const timeline: AnimeTimelineInstance = anime.timeline({
+            duration: 1600,
+            easing: 'easeOutQuart',
+            autoplay: false,
         })
 
+        // Hero image
+        timeline.add({
+            targets: '.shop-page__background',
+            scale: [1.06, 1],
+            opacity: [0, 1],
+            duration: 2400,
+        }, 400)
+
+        // Intro top elements
+        timeline.add({
+            targets: '.shop-page__intro .top > *',
+            translateY: [-100, 0],
+            delay: anime.stagger(250),
+        }, 400)
+
+        // Intro navbar
+        timeline.add({
+            targets: '.shop-page__nav .container > *',
+            translateY: [100, 0],
+            delay: anime.stagger(250),
+        }, 700)
+
+        // Transition in
+        requestAnimationFrame(timeline.play)
+
 
         // Destroy
         return () => {

src/routes/shop/index.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-    import { browser } from '$app/env'
     import { getContext, onMount } from 'svelte'
     import anime from 'animejs'
     import type { AnimeTimelineInstance } from 'animejs'
@@ -8,7 +7,6 @@
     import PageTransition from '$components/PageTransition.svelte'
     import Metas from '$components/Metas.svelte'
     import Image from '$components/atoms/Image.svelte'
-    import SiteTitle from '$components/atoms/SiteTitle.svelte'
     import ButtonCart from '$components/atoms/ButtonCart.svelte'
     import ShopLocationSwitcher from '$components/molecules/ShopLocationSwitcher.svelte'
     import PostersGrid from '$components/organisms/PostersGrid.svelte'
@@ -20,46 +18,8 @@
     const { shop, shopLocations, posters } = getContext('shop')
 
     let introEl: HTMLElement
-    let navObserver: IntersectionObserver
-    let scrolledPastIntro = false
-
-
-    /**
-     * Transition: Anime timeline
-     */
-    let timeline: AnimeTimelineInstance
-
-    if (browser) {
-        requestAnimationFrame(() => {
-            timeline = anime.timeline({
-                duration: 1600,
-                easing: 'easeOutQuart',
-                autoplay: false,
-            })
-
-            // Hero image
-            timeline.add({
-                targets: '.shop-page__background',
-                scale: [1.06, 1],
-                opacity: [0, 1],
-                duration: 2400,
-            }, 400)
-
-            // Intro top elements
-            timeline.add({
-                targets: '.shop-page__intro .top > *',
-                translateY: [-100, 0],
-                delay: anime.stagger(250),
-            }, 400)
-
-            // Intro navbar
-            timeline.add({
-                targets: '.shop-page__nav .container > *',
-                translateY: [100, 0],
-                delay: anime.stagger(250),
-            }, 700)
-        })
-    }
+    var navObserver: IntersectionObserver
+    var scrolledPastIntro = false
 
 
     onMount(() => {
@@ -74,11 +34,42 @@
         })
         navObserver.observe(introEl)
 
-        // Transition in
-        requestAnimationFrame(() => {
-            timeline.play()
+
+        /**
+         * Animations
+         */
+        // Setup animations
+        const timeline: AnimeTimelineInstance = anime.timeline({
+            duration: 1600,
+            easing: 'easeOutQuart',
+            autoplay: false,
         })
 
+        // Hero image
+        timeline.add({
+            targets: '.shop-page__background',
+            scale: [1.06, 1],
+            opacity: [0, 1],
+            duration: 2400,
+        }, 400)
+
+        // Intro top elements
+        timeline.add({
+            targets: '.shop-page__intro .top > *',
+            translateY: [-100, 0],
+            delay: anime.stagger(250),
+        }, 400)
+
+        // Intro navbar
+        timeline.add({
+            targets: '.shop-page__nav .container > *',
+            translateY: [100, 0],
+            delay: anime.stagger(250),
+        }, 700)
+
+        // Transition in
+        requestAnimationFrame(timeline.play)
+
 
         // Destroy
         return () => {