animation, need to figure out how to preload images

assets/javascripts/discourse/components/rewind.gjs

@@ -28,14 +28,9 @@ export default class Rewind extends Component {
 
   @tracked fullScreen = true;
   @tracked loadingRewind = false;
-  @tracked shouldAnimate = false; // Controls animation state
+
-  @tracked imagesLoaded = false;
-  imageCache = [];
   imageIndex = 1;
   frameCount = 11;
-  animationFrameId = null;
-  lastScrollPosition = 0;
-  scrollThreshold = 6; // How many pixels to scroll before frame change
 
   @action
   registerScrollWrapper(element) {
@@ -54,51 +49,6 @@ export default class Rewind extends Component {
     }
   }
 
-  @action
-  preLoadImages() {
-    const preloadPromises = [];
-
-    for (let i = 0; i < this.frameCount; i++) {
-      const img = new Image();
-      img.src = `/plugins/discourse-rewind/images/bg-frames/bg-2_${i + 1}.png`;
-      this.imageCache[i] = img;
-
-      preloadPromises.push(
-        new Promise((resolve) => {
-          img.onload = resolve;
-        })
-      );
-    }
-
-    // Wait for all images to load
-    Promise.all(preloadPromises).then(() => {
-      this.imagesLoaded = true;
-    });
-  }
-
-  @action
-  updateBackground() {
-    // Only continue if we should be animating
-    if (this.shouldAnimate) {
-      const children =
-        this.rewindContainer.getElementsByClassName("background-2");
-
-      if (children.length > 0 && this.imageCache[this.imageIndex]) {
-        const imageUrl = this.imageCache[this.imageIndex].src;
-        children[0].style.background = `url(${imageUrl})`;
-        children[0].style.backgroundSize = "contain";
-
-        // Update image index
-        this.imageIndex = (this.imageIndex + 1) % this.frameCount;
-      }
-
-      // Schedule the next frame
-      this.animationFrameId = requestAnimationFrame(() =>
-        this.updateBackground()
-      );
-    }
-  }
-
   @action
   toggleFullScreen() {
     this.fullScreen = !this.fullScreen;
@@ -119,6 +69,23 @@ export default class Rewind extends Component {
       children[i].style.transform = `translateY(-${
         (target.scrollTop * (i + 1)) / 5
       }px)`;
+      if (
+        children[i].classList.contains("background-2") &&
+        target.scrollTop % 3 === 0
+      ) {
+        let imageUrl = `/plugins/discourse-rewind/images/bg-frames/bg-2_${this.imageIndex}.png`;
+        children[i].style.background = `url(${imageUrl})`;
+        children[i].style.backgroundSize = "contain";
+        children[i].style.setProperty(
+          "--frame",
+          `var(--frame-${this.imageIndex})`
+        );
+        if (this.imageIndex === 10) {
+          this.imageIndex = 1;
+        } else {
+          this.imageIndex++;
+        }
+      }
     }
   }
 
@@ -134,7 +101,6 @@ export default class Rewind extends Component {
         (if this.fullScreen "-fullscreen")
       }}
       {{didInsert this.loadRewind}}
-      {{didInsert this.preLoadImages}}
       {{on "keydown" this.handleEscape}}
       {{didInsert this.registerRewindContainer}}
       tabindex="0"