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}