Transition: Don't animate height

So use a background div to squeeze and move other elements as well

src/animations/Transition.js

@@ -8,21 +8,22 @@ import { animDuration, animDurationLong } from '../utils/store'
 export const animateIn = scope => {
     // Panel itself
     const transition = anime({
-        targets: scope,
-        height: ['100%', '100%'],
-        scale: [1.1, 1],
+        targets: scope.querySelector('.transition__background'),
+        scaleY: [1, 1],
         opacity: [0, 1],
         duration: 400,
-        delay: 0,
-        easing: 'easeInOutQuart'
+        easing: 'easeInOutQuart',
+        begin () {
+            // Show the panel
+            scope.classList.remove('hidden')
+        }
     })
     // Globe icon
     const globe = anime({
         targets: scope.querySelector('svg'),
         opacity: [0, 1],
-        translateY: [32, 0],
+        translateY: ['16px', 0],
         duration: 400,
-        delay: 0,
         easing: 'easeInOutQuart'
     })
 
@@ -33,31 +34,39 @@ export const animateIn = scope => {
 ** Transition Out
 */
 export const animateOut = (scope, callback) => {
-    // Panel itself
-    const transition = anime({
-        targets: scope,
-        height: ['100%', 0],
+    // Background
+    const background = anime({
+        targets: scope.querySelector('.transition__background'),
+        scaleY: [1, 0],
         duration: animDurationLong,
         delay: 800,
         easing: 'easeInOutQuart',
-        complete: callback
+        complete () {
+            // Hide the panel
+            scope.classList.add('hidden')
+
+            // Run callback
+            callback()
+        }
     })
 
     // Title
     const title = anime({
         targets: scope.querySelector('.title-location'),
-        opacity: 0,
-        duration: 600,
-        delay: 1400,
+        opacity: [1, 0],
+        translateY: [0, '-50vh'],
+        duration: animDuration,
+        delay: 1000,
         easing: 'easeInOutQuart'
     })
 
     // Globe icon
     const globe = anime({
         targets: scope.querySelector('svg'),
-        opacity: 0,
-        duration: 600,
-        delay: 1400,
+        opacity: [1, 0],
+        translateY: [0, '-50vh'],
+        duration: animDuration,
+        delay: 1000,
         easing: 'easeInOutQuart'
     })
 }