Fix Intro?

.env

@@ -1,6 +1,5 @@
 # Website
 PROD_URL="https://housesof.world"
-TRANSITION=true
 HOME_PHOTOS_LIMIT=6
 
 # API

src/animations/Locations.js

@@ -10,7 +10,7 @@ export const animateIn = scope => {
     // Each location (reveal on scroll)
     const locations = ScrollOut({
         targets: scope.querySelectorAll('.location'),
-        onShown (el) {
+        onShown: el => {
             // Image
             anime({
                 targets: el.querySelector('img'),

src/animations/crossfade.js

@@ -4,11 +4,9 @@ import { quartOut } from 'svelte/easing'
 // Crossfade transition
 export const [send, receive] = crossfade({
     duration: d => Math.sqrt(d * 200),
-
+    fallback (node, params) {
-    fallback(node, params) {
         const style = getComputedStyle(node)
         const transform = style.transform === 'none' ? '' : style.transform
-
         return {
             duration: 600,
             easing: quartOut,

src/animations/index.js

@@ -53,7 +53,7 @@ export const animateIn = () => {
     const titleOf = ScrollOut({
         once: true,
         targets: '#title-of',
-        onShown (el) {
+        onShown: el => {
             anime({
                 targets: el.querySelectorAll('span'),
                 translateY: ['100%', 0],
@@ -65,6 +65,7 @@ export const animateIn = () => {
     })
 
     // Title: World (reveal on scroll)
+    const titleWorld = document.getElementById('title-world')
     const titleWorldTranslate = anime({
         targets: document.getElementById('title-world'),
         translateX: ['5%', '-3%'],
@@ -72,10 +73,11 @@ export const animateIn = () => {
         autoplay: false,
         duration: animDuration
     })
-    const titleWorld = ScrollOut({
+    const titleWorldAnime = parallaxAnime(titleWorld, titleWorldTranslate)
+    const titleWorldScroll = ScrollOut({
         once: true,
-        targets: document.getElementById('title-world'),
+        targets: titleWorld,
-        onShown (el) {
+        onShown: () => {
             const titleWorldLetters = anime({
                 targets: el.querySelectorAll('span'),
                 translateY: ['100%', 0],
@@ -83,9 +85,11 @@ export const animateIn = () => {
                 delay: anime.stagger(70),
                 duration: animDuration
             })
-            window.addEventListener('scroll', throttle(() => parallaxAnime(el, titleWorldTranslate), 10))
+            window.addEventListener('scroll', throttle(() => titleWorldAnime, 10))
-            requestAnimationFrame(() => parallaxAnime(el, titleWorldTranslate), 50)
+            requestAnimationFrame(() => titleWorldAnime)
         },
-        onHidden: () => window.removeEventListener('scroll', parallaxAnime)
+        onHidden: () => {
+            if (parallaxAnime) window.removeEventListener('scroll', parallaxAnime)
+        }
     })
 }

src/utils/Transition.svelte

@@ -37,7 +37,7 @@
 {#if show || !process.browser}
 <slot />
 
-{:else if process.env.CONFIG.TRANSITION}
+{:else}
 <div class="transition" id="transition" aria-hidden="true" bind:this={scope}>
     <div class="transition__loader"
         in:fly={{ y: 32, duration: 1000, easing: quartOut }}