Page and components animations rework WIP

src/animations/TitleSite.js

@@ -1,34 +1,27 @@
 import anime from 'animejs'
 import ScrollOut from 'scroll-out'
-import { transitionDelay } from 'utils/store'
 
 
 /*
 ** Transition In
 */
 export const animateIn = (scope, init) => {
+    const tl = anime.timeline({
+        easing: 'easeOutQuart',
+        duration: 1000
+    })
+
+    // Stagger each letters and words
+    tl.add({
+        targets: scope.querySelectorAll('span, em span'),
+        translateY: ['100%', 0],
+        delay: anime.stagger(40),
+    })
+
     // On scroll animation
     const title = ScrollOut({
         once: true,
         targets: scope,
-        onShown (el) {
-            // Each letters
-            anime({
-                targets: el.querySelectorAll('span'),
-                translateY: ['100%', 0],
-                easing: 'easeOutQuart',
-                delay: anime.stagger(40, { start: init ? 0 : transitionDelay }),
-                duration: 1000
-            })
-
-            // Word in between
-            anime({
-                targets: el.querySelectorAll('em span'),
-                opacity: [0, 1],
-                delay: anime.stagger(80, { start: (init ? 0 : transitionDelay) + 400 }),
-                duration: 1000,
-                easing: 'easeOutQuart'
-            })
-        }
+        onShown: () => tl.restart()
     })
 }