scripts/session_startup_animation.js

@@ -47,35 +47,13 @@ async function sessionStartupAnimation()
     // Then the text and sound
     let text_elem = document.createElement("h1");
     text_elem.className = "startup-animation-text";
-
+    text_elem.innerHTML = quote.text;
-    let time_between_chars = 200 / quote.text.length; // ms
-
-    for(let i = 0; i < quote.text.length; i++)
-    {
-        let char_elem = document.createElement("div");
-        char_elem.className = "startup-animation-char"
-        char_elem.style.animation =
-            "char-animation 3s ease-in-out " + String(i * time_between_chars) +
-            "ms, opacity-fade-in 1s " + String(i * time_between_chars) + "ms";
-
-        if(quote.text[i] == " ")
-            char_elem.innerHTML = "<pre>" + quote.text[i] + "</pre>";
-        else
-            char_elem.textContent = quote.text[i];
-
-        console.log(char_elem.onanimationend);
-        text_elem.appendChild(char_elem);
-    }
 
     document.body.appendChild(text_elem);
 
     sound.play();
 
-    await waitForAnimationEnd(text_elem.firstChild, "opacity-fade-in");
+    await waitForAnimationEnd(text_elem, "text-animation");
-
-    text_elem.childNodes.forEach((char_elem) => char_elem.style.opacity = 1);
-
-    await waitForAnimationEnd(text_elem.lastChild, "char-animation");
 
     // Fade out for both
     text_elem.style.animation = "opacity-fade-out 1s ease-in";
@@ -91,25 +69,15 @@ async function sessionStartupAnimation()
 
     all_default_elements.forEach((elem) => elem.style.animation = "opacity-fade-in 0.5s");
     all_default_elements.forEach((elem) => elem.style.opacity = 1);
-
-    window.onkeydown = null;
 }
 
 function interruptStartingAnimation()
 {
     let author_elem = document.body.querySelector(".startup-animation-author");
-    author_elem.getAnimations().forEach((animation) => {
+    author_elem.getAnimations().forEach((animation) => animation.finish());
-        // Skip if fade-out
-        if(animation.animationName != "opacity-fade-out")
-            animation.finish();
-    });
 
-    let text_elem = document.body.querySelectorAll(".startup-animation-char");
+    let text_elem = document.body.querySelector(".startup-animation-text");
-    text_elem.forEach((char_elem) => char_elem.getAnimations().forEach((animation) => {
+    text_elem.getAnimations().forEach((animation) => animation.finish());
-        // No need to skip fade-out because it is handled by startup-animation-text
-        if(animation.currentTime < 2800)
-            animation.currentTime = 2800;
-    }));
 
     if(sound.currentTime < 2.75)
     {
@@ -119,6 +87,7 @@ function interruptStartingAnimation()
 
 window.onkeydown = () => {
     interruptStartingAnimation();
+    window.onkeydown = null;
 }
 
 // Only start animation once per session

styles/general.css

@@ -1,8 +1,4 @@
 body {
     background-color: #151416;
     color: white;
-}
-
-pre {
-    margin: 0;
 }

styles/session_startup_animation.css

@@ -36,56 +36,42 @@
     }
 }
 
-@keyframes char-animation {
+@keyframes text-animation {
     0% {
         filter: hue-rotate(45deg);
-        top: 75vh;
+        top: 100%
     }
     45% {
-        top: -10vh;
+        top: 15%;
     }
     75% {
-        top: -1vh;
+        top: 24%;
     }
     90% {
-        top: -2vh;
+        top: 23%
     }
     99% {
-        top: 0.2vh;
+        top: 25.2%
     }
     100% {
         filter: hue-rotate(360deg);
-        top: 0vh;
     }
 }
 
 .startup-animation-text {
     font-family: "FuturaBoldItalic";
-    font-size: 14vh;
+    font-size: 9vh;
-    letter-spacing: -0.9vh;
     color: blue;
     position: fixed;
     width: 100%;
-    top: 23%;
+    top: 25%;
     text-align: center;
-    align-items: end;
+    animation: text-animation 3s ease-in-out, opacity-fade-in 1s;
-    justify-content: center;
-    display: flex;
-}
-
-.startup-animation-text > :nth-child(1) {
-    font-size: 15vh;
-}
-
-.startup-animation-char {
-    position: relative;
-    opacity: 0;
 }
 
 .startup-animation-author {
     font-family: "FuturaBold";
-    font-size: 4vh;
+    font-size: 5vh;
-    letter-spacing: 0.3vh;
     color: #ff00f8;
     position: fixed;
     width: 100%;