diff --git a/hugo-site/layouts/shortcodes/small-world-comparison.html b/hugo-site/layouts/shortcodes/small-world-comparison.html
index df9685c6..e82c6ba5 100644
--- a/hugo-site/layouts/shortcodes/small-world-comparison.html
+++ b/hugo-site/layouts/shortcodes/small-world-comparison.html
@@ -25,4 +25,5 @@ <h5 class="has-text-centered is-size-5 mb-2">Random Network</h5>
         </div>
     </div>
 </div>
+<script src="/js/animation-coordinator.js"></script>
 <script src="/js/small-world-comparison.js"></script>
diff --git a/hugo-site/layouts/shortcodes/small-world-routing.html b/hugo-site/layouts/shortcodes/small-world-routing.html
index 46b081b0..0e546563 100644
--- a/hugo-site/layouts/shortcodes/small-world-routing.html
+++ b/hugo-site/layouts/shortcodes/small-world-routing.html
@@ -15,4 +15,5 @@
         <canvas id="networkCanvas2" width="400" height="400" style="max-width: 70%; height: auto;"></canvas>
     </div>
 </div>
+<script src="/js/animation-coordinator.js"></script>
 <script src="/js/small-world-routing.js"></script>
diff --git a/hugo-site/layouts/shortcodes/small-world-scale.html b/hugo-site/layouts/shortcodes/small-world-scale.html
index f00aa685..7a172345 100644
--- a/hugo-site/layouts/shortcodes/small-world-scale.html
+++ b/hugo-site/layouts/shortcodes/small-world-scale.html
@@ -19,4 +19,5 @@
     </div>
     <div style="margin-bottom: 2rem;"></div>
 </div>
+<script src="/js/animation-coordinator.js"></script>
 <script src="/js/small-world-scale.js"></script>
diff --git a/hugo-site/static/js/animation-coordinator.js b/hugo-site/static/js/animation-coordinator.js
new file mode 100644
index 00000000..9601ffb4
--- /dev/null
+++ b/hugo-site/static/js/animation-coordinator.js
@@ -0,0 +1,15 @@
+// Global animation coordinator
+const AnimationCoordinator = {
+    activeAnimation: null,
+    
+    setActive(name) {
+        if (this.activeAnimation && this.activeAnimation !== name) {
+            // Pause other animations
+            const event = new CustomEvent('pause-other-animations', {
+                detail: { except: name }
+            });
+            document.dispatchEvent(event);
+        }
+        this.activeAnimation = name;
+    }
+};
diff --git a/hugo-site/static/js/small-world-comparison.js b/hugo-site/static/js/small-world-comparison.js
index 3a7c310a..f9e7b1c0 100644
--- a/hugo-site/static/js/small-world-comparison.js
+++ b/hugo-site/static/js/small-world-comparison.js
@@ -418,12 +418,29 @@ waitForD3().then(() => {
         }
     }
     
+    // Listen for pause events from other animations
+    document.addEventListener('pause-other-animations', (event) => {
+        if (event.detail.except !== 'comparison' && isPlaying) {
+            isPlaying = false;
+            const btn = document.getElementById('comparisonPlayPauseBtn');
+            if (btn) {
+                const icon = btn.querySelector('i');
+                if (icon) icon.className = 'fas fa-play';
+            }
+            if (animationFrame) cancelAnimationFrame(animationFrame);
+        }
+    });
+
     function togglePlayPause() {
         isPlaying = !isPlaying;
         const btn = document.getElementById('comparisonPlayPauseBtn');
         const icon = btn.querySelector('i');
         icon.className = isPlaying ? 'fas fa-pause' : 'fas fa-play';
         
+        if (isPlaying) {
+            AnimationCoordinator.setActive('comparison');
+        }
+        
         if (isPlaying) {
             startTime = Date.now();
             simulateRouting();
diff --git a/hugo-site/static/js/small-world-routing.js b/hugo-site/static/js/small-world-routing.js
index 52b6723a..7b019ce0 100644
--- a/hugo-site/static/js/small-world-routing.js
+++ b/hugo-site/static/js/small-world-routing.js
@@ -370,6 +370,19 @@ async function initVisualization() {
         draw();
     }
 
+    // Listen for pause events from other animations
+    document.addEventListener('pause-other-animations', (event) => {
+        if (event.detail.except !== 'routing' && isPlaying) {
+            isPlaying = false;
+            const btn = document.getElementById('routingPlayPauseBtn');
+            if (btn) {
+                const icon = btn.querySelector('i');
+                if (icon) icon.className = 'fas fa-play';
+            }
+            if (routeTimeout) clearTimeout(routeTimeout);
+        }
+    });
+
     function togglePlayPause() {
         isPlaying = !isPlaying;
         const btn = document.getElementById('routingPlayPauseBtn');
@@ -378,6 +391,10 @@ async function initVisualization() {
             return;
         }
         
+        if (isPlaying) {
+            AnimationCoordinator.setActive('routing');
+        }
+        
         const icon = btn.querySelector('i');
         if (!icon) {
             console.error('Button icon not found');
diff --git a/hugo-site/static/js/small-world-scale.js b/hugo-site/static/js/small-world-scale.js
index 1c5bc1e8..c606fd0c 100644
--- a/hugo-site/static/js/small-world-scale.js
+++ b/hugo-site/static/js/small-world-scale.js
@@ -352,12 +352,26 @@ waitForD3().then(() => {
 
     }
 
+    // Listen for pause events from other animations
+    document.addEventListener('pause-other-animations', (event) => {
+        if (event.detail.except !== 'scale' && isSimulating) {
+            isSimulating = false;
+            const btn = document.getElementById('scalePlayPauseBtn');
+            if (btn) {
+                const icon = btn.querySelector('i');
+                if (icon) icon.className = 'fas fa-play';
+            }
+            if (animationFrame) cancelAnimationFrame(animationFrame);
+        }
+    });
+
     function simulate() {
         if (!isSimulating) {
             isSimulating = true;
             const btn = document.getElementById('scalePlayPauseBtn');
             const icon = btn.querySelector('i');
             icon.className = 'fas fa-pause';
+            AnimationCoordinator.setActive('scale');
             
             async function step() {
                 if (!isSimulating) return;