diff --git a/frontend/src/ts/components/test/LiveStats.tsx b/frontend/src/ts/components/test/LiveStats.tsx
index d5b0016b0..c6e39fd9a 100644
--- a/frontend/src/ts/components/test/LiveStats.tsx
+++ b/frontend/src/ts/components/test/LiveStats.tsx
@@ -33,11 +33,13 @@ const [statsVisible, setStatsVisible] =
     animate: true,
   });
 
-const getStatsVisible = (): VisibilityAnimationOptions => {
-  return {
-    visible: statsVisible().visible && isFocused(),
+const getStatsVisible = (
+  visible: Accessor<boolean>,
+): Accessor<VisibilityAnimationOptions> => {
+  return () => ({
+    visible: statsVisible().visible && isFocused() && visible(),
     animate: statsVisible().animate,
-  };
+  });
 };
 
 export { setStatsVisible };
@@ -52,17 +54,21 @@ export function LiveStatsMini(props: {
       <Stat
         class="speed"
         value={() => (getLiveSpeedStyle() === "mini" ? props.wpm() : "")}
-        visibilityOptions={getStatsVisible}
+        visibilityOptions={getStatsVisible(
+          () => getLiveSpeedStyle() === "mini",
+        )}
       />
       <Stat
         class="acc"
-        value={() => (getLiveAccStyle() === "mini" ? props.acc() : "")}
-        visibilityOptions={getStatsVisible}
+        value={props.acc}
+        visibilityOptions={getStatsVisible(() => getLiveAccStyle() === "mini")}
       />
       <Stat
         class="burst"
-        value={() => (getLiveBurstStyle() === "mini" ? props.burst() : "")}
-        visibilityOptions={getStatsVisible}
+        value={props.burst}
+        visibilityOptions={getStatsVisible(
+          () => getLiveBurstStyle() === "mini",
+        )}
       />
     </>
   );
@@ -77,18 +83,22 @@ export function LiveStats(props: {
     <>
       <Stat
         class="liveSpeed"
-        value={() => (getLiveSpeedStyle() === "text" ? props.wpm() : "")}
-        visibilityOptions={getStatsVisible}
+        value={props.wpm}
+        visibilityOptions={getStatsVisible(
+          () => getLiveSpeedStyle() === "text",
+        )}
       />
       <Stat
         class="liveAcc"
-        value={() => (getLiveAccStyle() === "text" ? props.acc() : "")}
-        visibilityOptions={getStatsVisible}
+        value={props.acc}
+        visibilityOptions={getStatsVisible(() => getLiveAccStyle() === "text")}
       />
       <Stat
         class="liveBurst"
-        value={() => (getLiveBurstStyle() === "text" ? props.burst() : "")}
-        visibilityOptions={getStatsVisible}
+        value={props.burst}
+        visibilityOptions={getStatsVisible(
+          () => getLiveBurstStyle() === "text",
+        )}
       />
     </>
   );
diff --git a/frontend/src/ts/hooks/useVisibilityAnimation.ts b/frontend/src/ts/hooks/useVisibilityAnimation.ts
index 8bbdd3b09..e4c42682f 100644
--- a/frontend/src/ts/hooks/useVisibilityAnimation.ts
+++ b/frontend/src/ts/hooks/useVisibilityAnimation.ts
@@ -18,21 +18,27 @@ export function useVisibilityAnimation(
     if (!el) return;
     if (opt.visible) {
       if (opt.animate) {
+        el.show();
         el.animate({
           opacity: [0, 1],
           duration: applyReducedMotion(125),
         });
       } else {
         el.setStyle({ opacity: "1" });
+        el.show();
       }
     } else {
       if (opt.animate) {
         el.animate({
           opacity: [1, 0],
           duration: applyReducedMotion(125),
+          onComplete: () => {
+            el.hide();
+          },
         });
       } else {
         el.setStyle({ opacity: "0" });
+        el.hide();
       }
     }
   });