diff --git a/src/animations/TitleSite.js b/src/animations/TitleSite.js
index 2d75a9e..09cbe2d 100644
--- a/src/animations/TitleSite.js
+++ b/src/animations/TitleSite.js
@@ -1,7 +1,9 @@
import anime from 'animejs'
import ScrollOut from 'scroll-out'
-import { animDelay } from 'utils/store'
+import { firstLoad, animDurationLong, animDelay } from 'utils/store'
+let firstLoadValue
+firstLoad.subscribe(store => firstLoadValue = store)
/*
** Transition In
@@ -14,7 +16,7 @@ export const animateIn = (scope, init) => {
translateZ: [0, 0],
easing: 'easeOutQuart',
duration: 1000,
- delay: anime.stagger(40, { start: init ? 0 : animDelay }),
+ delay: anime.stagger(40, { start: init ? 0 : (firstLoadValue) ? animDurationLong : animDelay }),
autoplay: false
})
@@ -22,6 +24,9 @@ export const animateIn = (scope, init) => {
const title = ScrollOut({
once: true,
targets: scope,
- onShown: () => letters.restart()
+ onShown: () => {
+ console.log('TitleSite show')
+ letters.restart()
+ }
})
}
diff --git a/src/utils/Transition.svelte b/src/utils/Transition.svelte
index 04ffff6..a61fb51 100644
--- a/src/utils/Transition.svelte
+++ b/src/utils/Transition.svelte
@@ -5,9 +5,11 @@
import {
pageReady,
pageAnimation,
+ firstLoad,
animDuration,
animDelay,
- animPanelDelay
+ animPanelDelay,
+ animPanelShortDelay
} from 'utils/store'
// Components
import TitleSite from 'atoms/TitleSite'
@@ -20,7 +22,6 @@
$: animateIn = $pageAnimation
let scope
let show = false
- let firstLoad = true
let previousPage = ''
// Check if path is excluded
@@ -31,7 +32,9 @@
// Show transition if page is not excluded
if (!isExcluded(previousPage) || !isExcluded(page.path)) {
pageReady.set(false)
- process.browser && requestAnimationFrame(() => show = false)
+ process.browser && requestAnimationFrame(() => {
+ show = false
+ })
}
// Update page for viewer navigation checking
@@ -45,12 +48,12 @@
// Show transition
show = true
// Run the page animation
- process.browser && requestAnimationFrame(() => animateIn())
+ process.browser && requestAnimationFrame(animateIn)
// Change loader icon as the loader shown already
- firstLoad = false
+ firstLoad.set(false)
// Scroll to page top
window.scrollTo(0,0)
- }, firstLoad ? animPanelDelay : 600)
+ }, $firstLoad ? animPanelDelay : animPanelShortDelay)
}
})
@@ -61,7 +64,7 @@
in:fly={{ y: 24, duration: 800, easing: quartOut }}
out:fly={{ y: -window.innerHeight/2, duration: animDuration, easing: quartInOut }}
>
- {#if firstLoad}
+ {#if $firstLoad}
{:else}
diff --git a/src/utils/store.js b/src/utils/store.js
index fe852ae..81312a6 100644
--- a/src/utils/store.js
+++ b/src/utils/store.js
@@ -24,15 +24,17 @@ export let currentLocation = writable()
export let currentPhotos = writable()
// State
-export let pageReady = writable(false, () => {})
export let fullscreen = writable(undefined, () => {})
/* ==========================================================================
Animation related
========================================================================== */
+export let firstLoad = writable(true, () => {})
+export let pageReady = writable(false, () => {})
export let pageAnimation = writable(() => {}, () => {})
export const animDelay = 900
export const animPanelDelay = 900
+export const animPanelShortDelay = 600
export const animDuration = 1400
export const animDurationLong = 1800