Experimenting with the menu slide animation.

app/app.ejs

@@ -13,6 +13,9 @@
         #main {
             height: calc(100% - 22px);
             background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 100%);
+            width: 100%;
+            position: absolute;
+            z-index: 10;
         }
         #main[overlay] {
             filter: blur(3px) contrast(0.9) brightness(1.0);

app/assets/css/launcher.css

@@ -51,6 +51,8 @@ p {
 
 /* Frame Bar */
 #frameBar {
+    position: relative;
+    z-index: 100;
     display: flex;
     flex-direction: column;
     background: rgba(1, 2, 1, 0.5);
@@ -890,10 +892,14 @@ p {
 /* Main content container. */
 #landingContainer {
     height: 100%;
+    position: relative;
 }
 
 /* Upper content container. */
 #landingContainer > #upper {
+    position: relative;
+    transition: 2s ease;
+    top: 0px;
     height: 77%;
     display: flex;
 }
@@ -921,6 +927,9 @@ p {
     background: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
 }
 #landingContainer > #lower > #left {
+    position: relative;
+    transition: 2s ease;
+    top: 0px;
     height: 100%;
     width: 33%;
     display: inline-flex;
@@ -934,16 +943,23 @@ p {
     left: 50px;
 }
 #landingContainer > #lower > #center {
+    position: relative;
+    transition: 2s ease;
+    top: 0px;
     height: 100%;
     width: 34%;
     display: inline-flex;
     justify-content: center;
 }
 #landingContainer > #lower > #center #content {
+    transition: 2s ease;
     position: relative;
     top: 10px;
 }
 #landingContainer > #lower > #right {
+    position: relative;
+    transition: 2s ease;
+    top: 0px;
     height: 100%;
     width: 33%;
     display: inline-flex;
@@ -1267,6 +1283,7 @@ p {
     justify-content: center;
 }
 
+/* Button which opens the server selection view. */
 #server_selection_button {
     background: none;
     border: none;

app/assets/js/scripts/landing.js

@@ -101,6 +101,29 @@ server_selection_button.addEventListener('click', (e) => {
     toggleOverlay(true, 'serverSelectContent')
 })
 
+// Test menu transform.
+function slide_(up){
+    const lCUpper = document.querySelector('#landingContainer > #upper')
+    const lCLLeft = document.querySelector('#landingContainer > #lower > #left')
+    const lCLCenter = document.querySelector('#landingContainer > #lower > #center')
+    const lCLRight = document.querySelector('#landingContainer > #lower > #right')
+    const menuBtn = document.querySelector('#landingContainer > #lower > #center #content')
+
+    if(up){
+        lCUpper.style.top = '-200vh'
+        lCLLeft.style.top = '-200vh'
+        lCLCenter.style.top = '-200vh'
+        lCLRight.style.top = '-200vh'
+        menuBtn.style.top = '130vh'
+    } else {
+        lCUpper.style.top = '0px'
+        lCLLeft.style.top = '0px'
+        lCLCenter.style.top = '0px'
+        lCLRight.style.top = '0px'
+        menuBtn.style.top = '10px'
+    }
+}
+
 // Update Mojang Status Color
 const refreshMojangStatuses = async function(){
     console.log('Refreshing Mojang Statuses..')