fixing

resources/css/app.css

     box-shadow: 0 0 0 0 #fff;
 }
 
-.part{
+.part {
     transition: all 0.1s ease-in-out;
 }
 
+@keyframes to-left{
+    from{
+        transform: translateX(0%);
+    }
+    to{
+        transform: translateX(-100%);
+    }
+}
+
+@keyframes to-right{
+    from{
+        transform: translateX(0%);
+    }
+    to{
+        transform: translateX(100%);
+    }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+    @supports (animation-timeline: scroll()) {
+        .part.left {
+            animation: to-left linear both;
+            animation-timeline: scroll();
+            animation-range-end: 5%;
+        }
+
+        .part.right {
+            animation: to-right linear both;
+            animation-timeline: scroll();
+            animation-range-end: 5%;
+        }
+    }
+}
+
+
 @keyframes pulsIn {
     0% {
         box-shadow: inset 0 0 0 1rem #fff;
 
 @keyframes to-right {
     from {
-       transform: translateX(0)
+        transform: translateX(0)
     }
+
     to {
         transform: translateX(100%)
-     }
-  }
+    }
+}
 
 
 @media (prefers-reduced-motion: no-preference) {
     @supports (animation-timeline: scroll()) {
-      #right-cover {
-        animation: to-right linear both;
-        animation-timeline: scroll();
-        animation-range: contain;
-      }
+        #right-cover {
+            animation: to-right linear both;
+            animation-timeline: scroll();
+            animation-range: contain;
+        }
     }
-  }
+}

resources/js/app.js

 }, 1000); // Update every second (1000 milliseconds)
 
 document.addEventListener('DOMContentLoaded', function () {
-    imageLoading()
-    scrollOpenCover()
 
+    imageLoading()
     reset() // reset everrything to ensure smooth
     sessionStorage.setItem("initial-load", "true"); // will be used by click event
 
 
     let initLoad = sessionStorage.getItem("initial-load")
 
-
     // parts is intro cover
     let parts = document.getElementsByClassName("part");
     for (let part of parts) {
 }
 
 
-// enable open close cover
-function scrollOpenCover() {
-    var partLeftPos = 0;
-    var partRightPos = 0;
-
-    function updatePositions() {
-        var distance = $(window).scrollTop() * 2;
-        var left = partLeftPos - distance;
-        var right = partRightPos - distance;
-
-        $('.left').css('left', left + "px");
-        $('.right').css('right', right + "px");
-
-        //Calculate boundaries
-        var leftPartRightEdge = $('.left').offset().left + $('.left').outerWidth();
-
-        //Check if both parts are completely off-screen
-        var isLeftOffScreen = leftPartRightEdge <= 0;
-
-        //Toggle visibility and z-index
-        if (isLeftOffScreen && left < 0) {
-            $('.parent').removeClass('z-30');
-        } else {
-            $('.parent').addClass('z-30');
-        }
-    }
-
-    //Initial positions update
-    updatePositions();
-
-    //Listen to scroll events using requestAnimationFrame for smooth animation
-    var ticking = false;
-    $(window).scroll(function () {
-        if (!ticking) {
-            window.requestAnimationFrame(function () {
-                updatePositions();
-                ticking = false;
-            });
-        }
-        ticking = true;
-    });
-}
-
 // to ensure all images is loaded before starting animation and gimmick
 function imageLoading() {
     const images = document.querySelectorAll("img");
 
     //somehow the server work so fast, script doesn't have much time to set the load eventlistener
     //thus we check here, to ensure checkAllImagesLoaded run
-    checkAllImagesLoaded()
+    console.log(loadedCount, totalImages);
 }
 
 function reset() {
+
     // reset to top
     let body = document.querySelector("body");
     body.classList.remove("no-scroll");