From c2739728313a0fc36d295f52b8e00ab4b554b565 Mon Sep 17 00:00:00 2001
From: Ethan Dalool <git@voussoir.net>
Date: Fri, 28 Apr 2023 23:49:06 -0700
Subject: [PATCH] Use animationend event instead of settimeout.

---
 voussoir.net/index.html | 44 ++++++++++++++++++++---------------------
 1 file changed, 21 insertions(+), 23 deletions(-)

diff --git a/voussoir.net/index.html b/voussoir.net/index.html
index ab06e15..813da69 100644
--- a/voussoir.net/index.html
+++ b/voussoir.net/index.html
@@ -112,7 +112,7 @@ code { font-family: monospace; }
 {
     animation-name: splash_pulsate;
     animation-duration: 0.5s;
-    animation-iteration-count: infinite;
+    animation-iteration-count: 16;
     /* Helps prevent line wrap changing height on narrow screens */
     height: 2em;
 }
@@ -1348,7 +1348,6 @@ const SUNGLASSES_SPLASHES = [
 SPLASHES.push(...SUNGLASSES_SPLASHES);
 SPLASHES.push(`${SPLASHES.length + 1} splash texts? that's a lot!`);
 let SPLASH_INDEX = 0;
-const SPLASH_INTERVAL = 8000;
 
 function shuffle_splashes()
 {
@@ -1378,35 +1377,34 @@ function next_splash_text()
     return text;
 }
 
-let splash_anim_timeout;
 const HEADLINE_SPLASH = document.getElementById("headline_splash");
-function splash_fade_out()
+function splash_animationend(event)
 {
-    HEADLINE_SPLASH.classList.add("shrink_out");
-    splash_anim_timeout = setTimeout(splash_fade_in, 250);
-}
-function splash_fade_in()
-{
-    HEADLINE_SPLASH.classList.remove("shrink_out");
-    const new_text = next_splash_text();
-    if (SUNGLASSES_SPLASHES.indexOf(new_text) > -1 && document.hasFocus() && (! document.body.classList.contains("justthesplash")))
+    if (HEADLINE_SPLASH.classList.contains("shrink_out"))
     {
-        reveal_sunglasses();
+        HEADLINE_SPLASH.classList.remove("shrink_out");
+        const new_text = next_splash_text();
+        if (SUNGLASSES_SPLASHES.indexOf(new_text) > -1 && document.hasFocus() && (! document.body.classList.contains("justthesplash")))
+        {
+            reveal_sunglasses();
+        }
+        HEADLINE_SPLASH.innerText = new_text;
+        HEADLINE_SPLASH.classList.add("grow_in");
+    }
+    else if (HEADLINE_SPLASH.classList.contains("grow_in"))
+    {
+        HEADLINE_SPLASH.classList.remove("grow_in");
+    }
+    else
+    {
+        HEADLINE_SPLASH.classList.add("shrink_out");
     }
-    HEADLINE_SPLASH.innerText = new_text;
-    HEADLINE_SPLASH.classList.add("grow_in");
-    splash_anim_timeout = setTimeout(splash_fade_end, 250);
-}
-function splash_fade_end()
-{
-    HEADLINE_SPLASH.classList.remove("grow_in");
-    splash_anim_timeout = setTimeout(cycle_splash, SPLASH_INTERVAL);
 }
 function cycle_splash()
 {
-    clearTimeout(splash_anim_timeout);
-    splash_fade_out();
+    HEADLINE_SPLASH.classList.add("shrink_out");
 }
+HEADLINE_SPLASH.addEventListener("animationend", splash_animationend);
 
 ////////////////////////////////////////////////////////////////////////////////////////////////////