CSS, .jpg sequence - improve preload/hide last frames

Question

First of all, i am absolute greenhorn when it comes to coding.. I have a scroll animation with a .jpg sequence with this css:

<canvas id="Neue-Lippen-Kopfdrehung-kleiner" />



<script>const html = document.documentElement;
const canvas = document.getElementById("Neue-Lippen-Kopfdrehung-kleiner");
const context = canvas.getContext("2d");

const frameCount = 231;
const currentFrame = index => (
  `https://adictivedesignbaustelle.de/wp-content/uploads/2022/05/Kopfdrehung${index.toString().padStart(3, '0')}.jpg`
)

const preloadImages = () => {
  for (let i = 1; i < frameCount; i++) {
    const img = new Image();
    img.src = currentFrame(i);
  }
};

const img = new Image()
img.src = currentFrame(1);
canvas.width=1000;
canvas.height=1000;
img.onload=function(){
  context.drawImage(img, 0, 0);
}





const updateImage = index => {
  img.src = currentFrame(index);
  context.drawImage(img, 0, 0);
}

window.addEventListener('scroll', () => {  
  const scrollTop = html.scrollTop;
  const maxScrollTop = html.scrollHeight - window.innerHeight;
  const scrollFraction = scrollTop / maxScrollTop;
  const frameIndex = Math.min(
    frameCount - 1,
    Math.ceil(scrollFraction * frameCount)
  );
  
  requestAnimationFrame(() => updateImage(frameIndex + 1))
});

preloadImages()</script>

And on the Website it looks already good but the preload doesnt seem to be that perfect (but i see here it looks perfect!). I need to improve the "frame rate" or so, so it looks smoother.. also is there a option to hide last frames? As it is just stacking the .jpgs above in layers and i guess this slows it also down.

Quality and framerate in the preview here are the exact result i want for the website.

Thank you a lot for help an patience with me :D