WIP attempt to fix page transitions, Several edits

src/animations/place.js

@@ -1,6 +1,6 @@
 import anime from 'animejs'
 // import ScrollOut from 'scroll-out'
-import { animDuration } from 'utils/store'
+import { transitionNormal, transitionDelay } from 'utils/store'
 
 
 /*
@@ -9,7 +9,7 @@ import { animDuration } from 'utils/store'
 export const animateIn = () => {
     const tl = anime.timeline({
         duration: 1800,
-        delay: 1800,
+        delay: transitionDelay, // Delay in AnimeJS waits to run but sets the starting style as opposed to a setTimeout
         easing: 'easeOutQuart'
     })
 
@@ -17,27 +17,27 @@ export const animateIn = () => {
     tl.add({
         targets: '.place__title_houses',
         translateY: ['150%', 0],
-        duration: animDuration
-    })
+        duration: transitionNormal
+    }, 200)
     // Title: Of
     tl.add({
         targets: '.place__title_of',
         opacity: [0, 1],
-        duration: 800
-    }, 550)
+        duration: transitionNormal
+    }, 800)
     // Title: Place name
     tl.add({
         targets: '.place__title_name',
         translateY: ['150%', 0],
-        duration: animDuration
-    }, 200)
+        duration: transitionNormal
+    }, 350)
 
     // Switcher link
     tl.add({
         targets: '.place__title .button-control',
         scale: [0.95, 1],
         opacity: [0, 1],
-        duration: animDuration
+        duration: transitionNormal
     }, 700)
 
     // Illustration
@@ -45,7 +45,7 @@ export const animateIn = () => {
         targets: '.place__illustration',
         scale: [1.075, 1],
         opacity: [0, 1],
-        duration: animDuration
+        duration: transitionNormal
     }, 200)
 
     // Description
@@ -53,8 +53,8 @@ export const animateIn = () => {
         targets: '.place__description',
         opacity: [0, 1],
         translateY: [24, 0],
-        duration: animDuration
-    }, 800)
+        duration: transitionNormal
+    }, 650)
 
     // Play
     tl.play()