Locations: Rework the Crossfade transition

Add a start value for the scale to make it more elegant

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,

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,
+            duration,
-            easing: quartOut,
+            easing,
-            css: t => `
+            css: (t, u) => `
-                transform: ${transform} scale(${t});
+                transform: ${transform} scale(${1 - (sd * u)});
                 opacity: ${t}
             `
         }

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',
+        targets: titleOf,
-        onShown: el => {
+        onShown: () => titleOfAnime.restart()
-            anime({
-                targets: el.querySelectorAll('span'),
-                translateY: ['100%', 0],
-                easing: 'easeOutQuart',
-                delay: anime.stagger(70),
-                duration: animDuration
-            })
-        }
     })
 
     // Title: World (reveal on scroll)