Page and components animations rework WIP

src/animations/place.js

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