static/script-bon.js

@@ -6,6 +6,8 @@ document.addEventListener('DOMContentLoaded', function() {
 function setupPage() {
   // Checks if the user didn't enable prefers-reduced-motion
   let animationEnabled = window.matchMedia('(prefers-reduced-motion: no-preference)').matches;
+  // Boolean to keep track of current animation state, starts at true because it is linked to the button which is only displayed when animationEnabled is true
+  let currentAnimationState = true;
   // Dictionary to keep track of animation intervals
   let animationIntervals = {};
   // Dictionary to keep track of delay count for each animation
@@ -93,7 +95,7 @@ function setupPage() {
 
   function toggleAnimation() {
     // Play or pause the animations based on current state
-    if (animationEnabled) {
+    if (currentAnimationState) {
       // Pause the animations
       toggleable.style.display = 'none';
       imgTopToggleable.style.display = 'block';
@@ -111,34 +113,41 @@ function setupPage() {
       });
     }
     // Toggle animation state
-    animationEnabled = !animationEnabled;
+    currentAnimationState = !currentAnimationState;
   }
 
   let lastScrollTop = 0;
   let isCallbackRegistered = false;
 
   window.addEventListener("scroll", function() {
-    if (!isCallbackRegistered) {
-      window.requestAnimationFrame(function() {
-        let currentPosition = window.scrollY || document.documentElement.scrollTop;
-        const toggleButton = document.querySelectorAll('.toggleButton');
+    const toggleButton = document.querySelectorAll('.toggleButton');
+    if (animationEnabled) {
+      if (!isCallbackRegistered) {
+        window.requestAnimationFrame(function () {
+          let currentPosition = window.scrollY || document.documentElement.scrollTop;
 
-        if (currentPosition > lastScrollTop) {
-          // Scroll down
-          toggleButton.forEach(button => {
-            button.style.display = "none";
-          });
-        } else {
-          // Scroll up
-          toggleButton.forEach(button => {
-            button.style.display = "block";
-          });
-        }
-        lastScrollTop = currentPosition <= 0 ? 0 : currentPosition; // For Mobile or negative scrolling
-        isCallbackRegistered = false;
+          if (currentPosition > lastScrollTop) {
+            // Scroll down
+            toggleButton.forEach(button => {
+              button.style.display = "none";
+            });
+          } else {
+            // Scroll up
+            toggleButton.forEach(button => {
+              button.style.display = "block";
+            });
+          }
+          lastScrollTop = currentPosition <= 0 ? 0 : currentPosition; // For Mobile or negative scrolling
+          isCallbackRegistered = false;
+        });
+
+        isCallbackRegistered = true;
+      }
+    }
+    else {
+      toggleButton.forEach(button => {
+        button.style.display = "none";
       });
-
-      isCallbackRegistered = true;
     }
   });
 }