Page and components animations rework WIP

src/animations/viewer.js

@@ -1,37 +1,35 @@
 import anime from 'animejs'
-import { transitionNormal } from 'utils/store'
+import { animDuration } from 'utils/store'
 
 
 /*
 ** Transition In
 */
 export const animateIn = () => {
+    const tl = anime.timeline({
+        easing: 'easeOutQuart',
+        duration: animDuration
+    })
+
     // Buttons
-    anime({
+    tl.add({
         targets: '.viewer__top p, .viewer__top .buttons a',
         translateY: [-32, 0],
-        duration: transitionNormal,
         delay: anime.stagger(150, { start: 600 }),
-        easing: 'easeOutQuart'
     })
 
     // Carousel
-    anime({
+    tl.add({
         targets: '.viewer .carousel',
         opacity: [0, 1],
-        translateY: window.innerWidth >= 768 ? [32, 0] : ['-33%', '-37%'],
-        duration: transitionNormal,
-        delay: 300,
-        easing: 'easeOutQuart'
-    })
+        translateY: window.innerWidth >= 768 ? [32, 0] : ['-33%', '-37%']
+    }, 300)
 
     // Carousel: Number
-    anime({
+    tl.add({
         targets: '.viewer .carousel__number_column',
         opacity: [0, 1],
         marginTop: [24, 0],
-        duration: transitionNormal,
-        delay: anime.stagger(100, { start: 450 }),
-        easing: 'easeOutQuart'
-    })
+        delay: anime.stagger(100)
+    }, 450)
 }