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,17 +113,18 @@ 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');
+    if (animationEnabled) {
+      if (!isCallbackRegistered) {
+        window.requestAnimationFrame(function () {
+          let currentPosition = window.scrollY || document.documentElement.scrollTop;
 
           if (currentPosition > lastScrollTop) {
             // Scroll down
@@ -140,5 +143,11 @@ function setupPage() {
 
         isCallbackRegistered = true;
       }
+    }
+    else {
+      toggleButton.forEach(button => {
+        button.style.display = "none";
+      });
+    }
   });
 }