Page and components animations rework WIP

src/animations/Transition.js

@@ -1,75 +1,16 @@
-import anime from 'animejs'
-import { transitionNormal, transitionLong, transitionPanelIn } from 'utils/store'
+import { quartInOut } from 'svelte/easing'
 
 
 /*
-** Transition In
+** Animation Out: Background
 */
-export const animateIn = scope => {
-    const tl = anime.timeline({
-        duration: transitionPanelIn,
-        easing: 'easeInOutQuart',
-        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
-    tl.add({
-        targets: scope.querySelector('svg'),
-        opacity: [0, 1],
-        translateY: ['3vh', 0],
-        duration: transitionPanelIn
-    }, 0)
-}
-
-
-/*
-** Transition Out
-*/
-export const animateOut = (scope, callback) => {
-    const tl = anime.timeline({
-        easing: 'easeInOutQuart',
-        complete: () => {
-            // Hide the panel
-            scope.classList.add('hidden')
-
-            // Run callback
-            callback()
-        }
-    })
-
-    // Background
-    tl.add({
-        targets: scope.querySelector('.transition__background'),
-        scaleY: [1, 0],
-        duration: transitionLong
-    }, 600)
-
-    // Title
-    tl.add({
-        targets: scope.querySelector('.title-location'),
-        opacity: [1, 0],
-        translateY: [0, '-50vh'],
-        duration: transitionNormal
-    }, 850)
-
-    // Globe icon
-    tl.add({
-        targets: scope.querySelector('svg'),
-        opacity: [1, 0],
-        translateY: [0, '-50vh'],
-        duration: transitionNormal
-    }, 850)
-
-    // Play
-    tl.play()
+export const panelBackgroundOut = (node, params) => {
+    return {
+        delay: params.delay || 0,
+        duration: params.duration || 400,
+        easing: params.easing || quartInOut,
+        css: (t, u) => `
+            transform: scaleY(${t})
+        `
+    }
 }