Smoother animation and syncronisation

scripts/session_startup_animation.js

@@ -47,13 +47,35 @@ 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, "text-animation");
+    await waitForAnimationEnd(text_elem.firstChild, "opacity-fade-in");
+
+    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";

styles/general.css

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

styles/session_startup_animation.css

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