From 94fa63ef4175bf272690b56bfb3d41c859da4ac8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Sat, 4 Apr 2020 11:45:26 +0200
Subject: [PATCH] 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 | 17 +++++++----------
 src/animations/TitleSite.js |  3 ++-
 src/animations/index.js     | 34 ++++++++++++++++------------------
 src/animations/page.js      | 11 +++++++----
 src/atoms/TitleSite.svelte  |  3 ++-
 src/routes/credits.svelte   |  4 ++--
 src/utils/Transition.svelte | 25 ++++++++++++++-----------
 src/utils/store.js          |  1 +
 8 files changed, 51 insertions(+), 47 deletions(-)

diff --git a/src/animations/Locations.js b/src/animations/Locations.js
index 3e70f10..97f07ee 100644
--- a/src/animations/Locations.js
+++ b/src/animations/Locations.js
@@ -12,30 +12,27 @@ export const animateIn = scope => {
         targets: scope.querySelectorAll('.location'),
         onShown (el) {
             const tl = anime.timeline({
-                autoplay: false,
-                duration: 600,
-                delay: anime.stagger(200),
-                easing: 'easeOutQuart'
+                easing: 'easeOutQuart',
+                duration: 600
             })
 
             // Image
             tl.add({
-                targets: scope.querySelector('img'),
+                targets: el.querySelector('img'),
                 scale: [1.3, 1],
                 opacity: [0, 1],
-                duration: 1800,
-                delay: 100
-            })
+                duration: 1800
+            }, 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)
         }
diff --git a/src/animations/TitleSite.js b/src/animations/TitleSite.js
index b4a0051..7c23e78 100644
--- a/src/animations/TitleSite.js
+++ b/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
diff --git a/src/animations/index.js b/src/animations/index.js
index 49d376a..e8ddc34 100644
--- a/src/animations/index.js
+++ b/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)
         },
diff --git a/src/animations/page.js b/src/animations/page.js
index 2f7e826..13edb2c 100644
--- a/src/animations/page.js
+++ b/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',
-        duration: animDuration,
-        delay: anime.stagger(220, { start: animDelay }),
+        delay: anime.stagger(160, { start: animDelay })
     })
 }
diff --git a/src/atoms/TitleSite.svelte b/src/atoms/TitleSite.svelte
index cfd1707..8e7f967 100644
--- a/src/atoms/TitleSite.svelte
+++ b/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>
diff --git a/src/routes/credits.svelte b/src/routes/credits.svelte
index 03ba277..55e49b6 100644
--- a/src/routes/credits.svelte
+++ b/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" />
diff --git a/src/utils/Transition.svelte b/src/utils/Transition.svelte
index 86ae66f..4e44a45 100644
--- a/src/utils/Transition.svelte
+++ b/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) {
-            setTimeout(() => {
-                show = true
-                firstLoad.set(false)
-                setTimeout(() => animateIn(scope), 1)
-            }, 1000)
-        }
+        loaded && setTimeout(() => {
+            // Display page content
+            show = true
+            // Change loader icon as the loader shown already
+            firstLoad.set(false)
+            // 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}
diff --git a/src/utils/store.js b/src/utils/store.js
index 0b37302..700c43f 100644
--- a/src/utils/store.js
+++ b/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