From a93571842b3c9ef1f99fec30e39ae26e7de9c94f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Tue, 7 Apr 2020 19:24:06 +0200
Subject: [PATCH] Locations: Rework the Crossfade transition

Add a start value for the scale to make it more elegant
---
 src/animations/Locations.js |  2 --
 src/animations/crossfade.js | 16 +++++++++++-----
 src/animations/index.js     | 23 ++++++++++++-----------
 3 files changed, 23 insertions(+), 18 deletions(-)

diff --git a/src/animations/Locations.js b/src/animations/Locations.js
index 6823f3c..5ab0278 100644
--- a/src/animations/Locations.js
+++ b/src/animations/Locations.js
@@ -12,8 +12,6 @@ let delay = 0
 export const animateIn = scope => {
     // Each location (reveal on scroll)
     scope.querySelectorAll('.location').forEach(location => {
-        console.log(delay)
-
         const tl = anime.timeline({
             easing: 'easeOutQuart',
             duration: 600,
diff --git a/src/animations/crossfade.js b/src/animations/crossfade.js
index fc4beee..f5e165f 100644
--- a/src/animations/crossfade.js
+++ b/src/animations/crossfade.js
@@ -4,14 +4,20 @@ import { quartOut } from 'svelte/easing'
 // Crossfade transition
 export const [send, receive] = crossfade({
     duration: d => Math.sqrt(d * 200),
-    fallback (node, params) {
+    fallback: (node, params) => {
+        const {
+            duration = 600,
+            easing = quartOut,
+            start = 0.85
+        } = params
         const style = getComputedStyle(node)
         const transform = style.transform === 'none' ? '' : style.transform
+        const sd = 1 - start
         return {
-            duration: 600,
-            easing: quartOut,
-            css: t => `
-                transform: ${transform} scale(${t});
+            duration,
+            easing,
+            css: (t, u) => `
+                transform: ${transform} scale(${1 - (sd * u)});
                 opacity: ${t}
             `
         }
diff --git a/src/animations/index.js b/src/animations/index.js
index 8e84a9c..ca9bfed 100644
--- a/src/animations/index.js
+++ b/src/animations/index.js
@@ -50,18 +50,19 @@ export const animateIn = () => {
     })
 
     // Title: Of (reveal on scroll)
-    const titleOf = ScrollOut({
+    const titleOf = document.getElementById('title-of')
+    const titleOfAnime = anime({
+        targets: titleOf.querySelectorAll('span'),
+        translateY: ['100%', 0],
+        easing: 'easeOutQuart',
+        delay: anime.stagger(70),
+        duration: animDuration,
+        autoplay: false
+    })
+    const titleOfScroll = ScrollOut({
         once: true,
-        targets: '#title-of',
-        onShown: el => {
-            anime({
-                targets: el.querySelectorAll('span'),
-                translateY: ['100%', 0],
-                easing: 'easeOutQuart',
-                delay: anime.stagger(70),
-                duration: animDuration
-            })
-        }
+        targets: titleOf,
+        onShown: () => titleOfAnime.restart()
     })
 
     // Title: World (reveal on scroll)