Fix pages and components animations

- Fix delays
- Add the init back for TitleSite as it needs a delay for the page instance vs. loader

src/animations/Locations.js

@@ -12,30 +12,27 @@ export const animateIn = scope => {
         targets: scope.querySelectorAll('.location'),
         onShown (el) {
             const tl = anime.timeline({
-                autoplay: false,
+                easing: 'easeOutQuart',
-                duration: 600,
+                duration: 600
-                delay: anime.stagger(200),
-                easing: 'easeOutQuart'
             })
 
             // Image
             tl.add({
-                targets: scope.querySelector('img'),
+                targets: el.querySelector('img'),
                 scale: [1.3, 1],
                 opacity: [0, 1],
-                duration: 1800,
+                duration: 1800
-                delay: 100
+            }, 100)
-            })
 
             // Name
             tl.add({
-                targets: scope.querySelector('h3'),
+                targets: el.querySelector('h3'),
                 translateY: ['100%', 0]
             }, 300)
 
             // Country
             tl.add({
-                targets: scope.querySelector('p'),
+                targets: el.querySelector('p'),
                 translateY: ['100%', 0]
             }, 550)
         }

src/animations/TitleSite.js

@@ -1,5 +1,6 @@
 import anime from 'animejs'
 import ScrollOut from 'scroll-out'
+import { animDelay } from 'utils/store'
 
 
 /*
@@ -15,7 +16,7 @@ export const animateIn = (scope, init) => {
     tl.add({
         targets: scope.querySelectorAll('span, em span'),
         translateY: ['100%', 0],
-        delay: anime.stagger(40),
+        delay: anime.stagger(40, { start: init ? 0 : animDelay }),
     })
 
     // On scroll animation

src/animations/index.js

@@ -44,7 +44,7 @@ export const animateIn = () => {
         targets: '#intro-carousel',
         onShown (el) {
             anime({
-                targets: '#intro-carousel',
+                targets: el,
                 opacity: [0, 1],
                 translateY: [24, 0],
                 easing: 'easeOutQuart',
@@ -71,26 +71,24 @@ export const animateIn = () => {
     })
 
     // Title: World (reveal on scroll)
-    const titleWorldLetters = anime({
-        targets: scope.querySelectorAll('span'),
-        translateY: ['100%', 0],
-        easing: 'easeOutQuart',
-        delay: anime.stagger(70),
-        duration: animDuration,
-        autoplay: false
-    })
-    const titleWorldTranslate = anime({
-        targets: scope,
-        translateX: ['5%', '-3%'],
-        easing: 'linear',
-        autoplay: false,
-        duration: animDuration
-    })
-    // Reveal on scroll
     const titleWorld = ScrollOut({
         once: true,
-        targets: '#title-world',
+        targets: document.getElementById('title-world'),
         onShown (el) {
+            const titleWorldLetters = anime({
+                targets: el.querySelectorAll('span'),
+                translateY: ['100%', 0],
+                easing: 'easeOutQuart',
+                delay: anime.stagger(70),
+                duration: animDuration
+            })
+            const titleWorldTranslate = anime({
+                targets: el,
+                translateX: ['5%', '-3%'],
+                easing: 'linear',
+                autoplay: false,
+                duration: animDuration
+            })
             window.addEventListener('scroll', throttle(() => parallaxAnime(el, titleWorldTranslate), 10))
             setTimeout(() => parallaxAnime(el, titleWorldTranslate), 50)
         },

src/animations/page.js

@@ -6,13 +6,16 @@ import { animDuration, animDelay } from 'utils/store'
 ** Transition In
 */
 export const animateIn = () => {
+    const tl = anime.timeline({
+        easing: 'easeOutQuart',
+        duration: animDuration
+    })
+
     // Simple slide and fade on each part of the page
-    anime({
+    tl.add({
         targets: document.querySelectorAll('.page__part'),
         opacity: [0, 1],
         translateY: [8, 0],
-        easing: 'easeOutQuart',
+        delay: anime.stagger(160, { start: animDelay })
-        duration: animDuration,
-        delay: anime.stagger(220, { start: animDelay }),
     })
 }

src/atoms/TitleSite.svelte

@@ -6,6 +6,7 @@
     import { animateIn } from 'animations/TitleSite'
 
     // Props and variables
+    export let init = false
     let mounted = false
     let scope
 
@@ -14,7 +15,7 @@
     ** Run code when mounted
     */
     onMount(() => {
-        animateIn(scope)
+        animateIn(scope, init)
         mounted = true
     })
 </script>

src/routes/credits.svelte

@@ -39,10 +39,10 @@
     />
 </svelte:head>
 
-<Transition>
+<Transition {animateIn}>
     <section class="page">
         <div class="wrap">
-            <div class="page__top page__part">
+            <div class="page__top">
                 <a href="/" class="button-control button-control--pink dir-left">
                     <IconArrow direction="left" color="#fff" class="icon" />
                     <IconArrow direction="left" color="#fff" class="icon" hidden="true" />

src/utils/Transition.svelte

@@ -3,7 +3,7 @@
     import { fly, fade } from 'svelte/transition'
     import { quartInOut, quartOut } from 'svelte/easing'
     import { stores } from '@sapper/app'
-    import { pageReady, firstLoad } from 'utils/store'
+    import { pageReady, firstLoad, animDelayPanel } from 'utils/store'
     const { page } = stores()
 
     // Animations
@@ -21,27 +21,30 @@
 
     // Listen for when a route is mounted
     pageReady.subscribe(loaded => {
-        if (loaded) {
+        loaded && setTimeout(() => {
-            setTimeout(() => {
+            // Display page content
-                show = true
+            show = true
-                firstLoad.set(false)
+            // Change loader icon as the loader shown already
-                setTimeout(() => animateIn(scope), 1)
+            firstLoad.set(false)
-            }, 1000)
+            // Scroll to page top
-        }
+            window.scrollTo(0,0)
+            // Run the page animation / after a tiny delay
+            setTimeout(() => animateIn(scope), 1)
+        }, animDelayPanel)
     })
 </script>
 
 {#if show || !process.browser}
-<slot></slot>
+<slot />
 
 {:else}
 <div class="transition" id="transition" aria-hidden="true" bind:this={scope}>
     <div class="transition__loader"
-        in:fly={{ y: 24, duration: 800, easing: quartOut }}
+        in:fly={{ y: 32, duration: 1000, easing: quartOut }}
         out:fly={{ y: -window.innerHeight/2, duration: 1400, easing: quartInOut }}
     >
         {#if $firstLoad}
-        <TitleSite />
+        <TitleSite init={true} />
         {:else}
         <IconGlobe width="44" color="#fff" animated="true" />
         {/if}

src/utils/store.js

@@ -33,5 +33,6 @@ export let fullscreen = writable()
    Animation related
 ========================================================================== */
 export const animDelay = 800
+export const animDelayPanel = 1000
 export const animDuration = 1400
 export const animDurationLong = 1800