WIP attempt to fix page transitions, Several edits

src/animations/Transition.js

@@ -1,32 +1,34 @@
 import anime from 'animejs'
-import { animDuration, animDurationLong } from 'utils/store'
+import { transitionNormal, transitionLong, transitionPanelIn } from 'utils/store'
 
 
 /*
 ** Transition In
 */
 export const animateIn = scope => {
-    // Panel itself
-    const transition = anime({
-        targets: scope.querySelector('.transition__background'),
-        scaleY: [1, 1],
-        opacity: [0, 1],
-        duration: 400,
+    const tl = anime.timeline({
+        duration: transitionPanelIn,
         easing: 'easeInOutQuart',
-        begin () {
+        begin: () => {
             // Show the panel
             scope.classList.remove('hidden')
         }
     })
+
+    // Panel itself
+    tl.add({
+        targets: scope.querySelector('.transition__background'),
+        scaleY: [1, 1],
+        opacity: [0, 1],
+        duration: transitionPanelIn
+    }, 0)
     // Globe icon
-    const globe = anime({
+    tl.add({
         targets: scope.querySelector('svg'),
         opacity: [0, 1],
-        translateY: ['16px', 0],
-        duration: 400,
-        easing: 'easeInOutQuart'
-    })
-
+        translateY: ['3vh', 0],
+        duration: transitionPanelIn
+    }, 0)
 }
 
 
@@ -34,14 +36,9 @@ export const animateIn = scope => {
 ** Transition Out
 */
 export const animateOut = (scope, callback) => {
-    // Background
-    const background = anime({
-        targets: scope.querySelector('.transition__background'),
-        scaleY: [1, 0],
-        duration: animDurationLong,
-        delay: 800,
+    const tl = anime.timeline({
         easing: 'easeInOutQuart',
-        complete () {
+        complete: () => {
             // Hide the panel
             scope.classList.add('hidden')
 
@@ -50,23 +47,29 @@ export const animateOut = (scope, callback) => {
         }
     })
 
+    // Background
+    tl.add({
+        targets: scope.querySelector('.transition__background'),
+        scaleY: [1, 0],
+        duration: transitionLong
+    }, 600)
+
     // Title
-    const title = anime({
+    tl.add({
         targets: scope.querySelector('.title-location'),
         opacity: [1, 0],
         translateY: [0, '-50vh'],
-        duration: animDuration,
-        delay: 1000,
-        easing: 'easeInOutQuart'
-    })
+        duration: transitionNormal
+    }, 850)
 
     // Globe icon
-    const globe = anime({
+    tl.add({
         targets: scope.querySelector('svg'),
         opacity: [1, 0],
         translateY: [0, '-50vh'],
-        duration: animDuration,
-        delay: 1000,
-        easing: 'easeInOutQuart'
-    })
+        duration: transitionNormal
+    }, 850)
+
+    // Play
+    tl.play()
 }