diff --git a/.env b/.env index 3bf5c67..1becf69 100644 --- a/.env +++ b/.env @@ -1,6 +1,5 @@ # Website PROD_URL="https://housesof.world" -TRANSITION=true HOME_PHOTOS_LIMIT=6 # API diff --git a/src/animations/Locations.js b/src/animations/Locations.js index cf005c5..02e46f0 100644 --- a/src/animations/Locations.js +++ b/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'), diff --git a/src/animations/crossfade.js b/src/animations/crossfade.js index a46a0c4..fc4beee 100644 --- a/src/animations/crossfade.js +++ b/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, diff --git a/src/animations/index.js b/src/animations/index.js index f6a2849..a9be870 100644 --- a/src/animations/index.js +++ b/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'), - onShown (el) { + targets: titleWorld, + 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)) - requestAnimationFrame(() => parallaxAnime(el, titleWorldTranslate), 50) + window.addEventListener('scroll', throttle(() => titleWorldAnime, 10)) + requestAnimationFrame(() => titleWorldAnime) }, - onHidden: () => window.removeEventListener('scroll', parallaxAnime) + onHidden: () => { + if (parallaxAnime) window.removeEventListener('scroll', parallaxAnime) + } }) } diff --git a/src/utils/Transition.svelte b/src/utils/Transition.svelte index 2c94243..e5a2fe4 100644 --- a/src/utils/Transition.svelte +++ b/src/utils/Transition.svelte @@ -37,7 +37,7 @@ {#if show || !process.browser} -{:else if process.env.CONFIG.TRANSITION} +{:else}