diff --git a/src/animations/place.js b/src/animations/place.js index 788f8f1..809fcda 100644 --- a/src/animations/place.js +++ b/src/animations/place.js @@ -9,6 +9,7 @@ import { animDuration } from 'utils/store' export const animateIn = () => { const tl = anime.timeline({ duration: 1800, + delay: 1800, easing: 'easeOutQuart' }) diff --git a/src/atoms/TitleSite.svelte b/src/atoms/TitleSite.svelte index 651003f..ae5efb6 100644 --- a/src/atoms/TitleSite.svelte +++ b/src/atoms/TitleSite.svelte @@ -7,18 +7,19 @@ // Variables let scope + let mounted = false /* ** Run code on component mount */ onMount(() => { - // Entering transition + mounted = true animateIn(scope) }) -
+
{@html charsToSpan('Houses')} diff --git a/src/utils/Transition.svelte b/src/utils/Transition.svelte index 8095fe0..cf41d95 100644 --- a/src/utils/Transition.svelte +++ b/src/utils/Transition.svelte @@ -62,9 +62,7 @@ }, animDurationLong * 0.75 + 400) // 4. Run the page's transition in, but a little bit before the end of the loader - setTimeout(() => { - pageTransition.onAnimationEnd() - }, animDurationLong * 0.75 + 400) // + 200 + pageTransition.onAnimationEnd() } })