diff --git a/public/scripts/make-animations.js b/public/scripts/make-animations.js
index 008ec97..0aea83b 100755
--- a/public/scripts/make-animations.js
+++ b/public/scripts/make-animations.js
@@ -20,8 +20,6 @@ async function preloadStoneSvgs() {
     } else {
       console.error('Failed to load white stone SVG:', whiteResponse.status);
     }
-
-    console.log('Stone SVGs pre-loaded successfully');
   } catch (error) {
     console.error('Error pre-loading stone SVGs:', error);
   }
@@ -31,7 +29,7 @@ async function preloadStoneSvgs() {
 preloadStoneSvgs();
 
 // Create bouncing stone animation without anime.js
-async function createBouncingStonesAnimation(color, count = 20) {
+function createBouncingStonesAnimation(whiteCount = 20, blackCount = 20) {
   const gameBoard = document.getElementById('game-board');
   if (!gameBoard) return;
 
@@ -44,15 +42,7 @@ async function createBouncingStonesAnimation(color, count = 20) {
 
   // Create stone elements with pre-loaded SVG content
   function createStones() {
-    // Get the appropriate pre-loaded SVG content
-    const svgContent = color === 'black' ? blackStoneSvg : whiteStoneSvg;
-
-    if (!svgContent) {
-      console.error(`No pre-loaded SVG content available for ${color} stone`);
-      return;
-    }
-
-    for (let i = 0; i < count; i++) {
+    for (let i = 0; i < whiteCount + blackCount; i++) {
       const stone = document.createElement('div');
       stone.className = 'animation-stone';
       stone.style.position = 'absolute';
@@ -63,7 +53,7 @@ async function createBouncingStonesAnimation(color, count = 20) {
       stone.style.opacity = '1';
 
       // Set the pre-loaded SVG content as innerHTML
-      stone.innerHTML = svgContent;
+      stone.innerHTML = i < whiteCount ? whiteStoneSvg : blackStoneSvg;
 
       // Make sure the SVG inside fills the container
       const svg = stone.querySelector('svg');
@@ -125,7 +115,7 @@ async function createBouncingStonesAnimation(color, count = 20) {
   function fadeOut() {
     const animationStones = document.querySelectorAll('.animation-stone');
     const fadeStartTime = performance.now();
-    const fadeDuration = 15 * 100; // 100 = 1sec
+    const fadeDuration = 500;
 
     function fade(currentTime) {
       const elapsed = currentTime - fadeStartTime;
@@ -152,7 +142,8 @@ async function createBouncingStonesAnimation(color, count = 20) {
     if (!startTime) startTime = currentTime;
     const elapsed = currentTime - startTime;
 
-    if (elapsed < 5000) {
+    // Wait 15s to fade away
+    if (elapsed < 15000) {
       animateStones();
       animationId = requestAnimationFrame(animate);
     } else {
@@ -192,20 +183,18 @@ async function createBouncingStonesAnimation(color, count = 20) {
 
 const animations = {};
 
-// Define the three animations
+// We use functions so that we have time to pre-load the svgs before trying to create the animations
+// which isn't actually ideal because what if the animation plays right away, but, it works!
 animations['black-victory'] = () => {
-  return createBouncingStonesAnimation('black', 40);
+  return createBouncingStonesAnimation(0, 40);
 };
 
 animations['white-victory'] = () => {
-  return createBouncingStonesAnimation('white', 40);
+  return createBouncingStonesAnimation(40, 0);
 };
 
 animations['draw'] = () => {
-  // For draw, create 10 black and 10 white stones
-  const blackAnimation = createBouncingStonesAnimation('black', 20);
-  const whiteAnimation = createBouncingStonesAnimation('white', 20);
-  return [blackAnimation, whiteAnimation];
+  return createBouncingStonesAnimation(20, 20);
 };
 
 document.addEventListener('htmx:wsAfterMessage', async function (e) {
@@ -219,19 +208,10 @@ document.addEventListener('htmx:wsAfterMessage', async function (e) {
     return;
   }
 
-  // Play the requested animation
   const animationFn = animations[msg.animation];
   if (animationFn) {
-    console.log('Playing animation:', msg.animation);
-    const result = await animationFn();
-
-    // Handle both single animations and arrays of animations (for draw)
-    if (Array.isArray(result)) {
-      result.forEach((animation) => animation.play());
-    } else if (result) {
-      result.play();
-    }
+    animationFn().play();
   } else {
-    console.log('Unknown animation:', msg.animation);
+    console.error('Unknown animation:', msg.animation);
   }
 });