Transition WIP
Some checks failed
continuous-integration/drone/push Build is failing

This commit is contained in:
2020-03-11 14:51:52 +01:00
parent 0b55be4222
commit c8ffd8bb51

View File

@@ -29,6 +29,9 @@
if (!firstLoad && process.browser) { if (!firstLoad && process.browser) {
animateIn(scope) animateIn(scope)
} }
// TODO: Figure out how to delay the page rendering a little bit before the end of the transition panel ending
// Set pageReady to false (?) // Set pageReady to false (?)
pageReady.set(false) pageReady.set(false)
}) })
@@ -36,20 +39,22 @@
// 2. Watch when loaded changes // 2. Watch when loaded changes
pageReady.subscribe(loaded => { pageReady.subscribe(loaded => {
if (loaded) { if (loaded) {
// 3. Hide the loader
setTimeout(() => { setTimeout(() => {
// Scroll back to top of page
window.scrollTo(0,0)
// 3. Hide the loader
// Also sets firstLoad to false in order to show the second icon afterwards // Also sets firstLoad to false in order to show the second icon afterwards
animateOut(scope, () => firstLoad = false) animateOut(scope, () => firstLoad = false)
}, 400) // This duration allows to not come over the transition In }, 400) // This duration allows to not come over the transition In
// [OU ALORS] les pages changent la valeur de loaded plus tard // [OU ALORS] les pages changent la valeur de loaded plus tard
// Scroll back to top of page // Scroll back to top of page
setTimeout(() => {
window.scrollTo(0,0)
}, animDurationLong * 0.75 + 400)
// 4. Run the page's transition in, but a little bit before the end of the loader // 4. Run the page's transition in, but a little bit before the end of the loader
setTimeout(() => { setTimeout(() => {
pageTransition.onAnimationEnd() pageTransition.onAnimationEnd()
}, animDurationLong * 0.666 + 200) }, animDurationLong * 0.75 + 400) // + 200
} }
}) })
</script> </script>
@@ -58,6 +63,7 @@
<div class="loader"> <div class="loader">
{#if firstLoad} {#if firstLoad}
<TitleSite /> <TitleSite />
{:else} {:else}
<IconGlobe width="44" color="#fff" animated="true" /> <IconGlobe width="44" color="#fff" animated="true" />
{/if} {/if}