Apenas estoy comenzando con JavaScript y sigo luchando mucho para alcanzar mis objetivos. Logré hacer funcionar este pequeño script, que me permite iniciar una animación cuadro por cuadro relacionada con el desplazamiento de la página. Mi animación es un bucle y me gustaría a partir de ahora simplemente que llegó al final de la página, el desplazamiento se reinicia automáticamente en la parte superior de la página. Para que la animación parezca infinita.

He visto algunas soluciones con un clon de mi contenido pero no me parece muy adecuado. Aquí está el JS tal cual.

¡Gracias de antemano por tus ideas!

 const html = document.documentElement; const canvas = document.getElementById("fuck"); const context = canvas.getContext("2d"); const frameCount = 100; const currentFrame = index => (`https://www.jabberwock.archi/maquette/img/${index.toString().padStart(4, '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=1800; canvas.height=1206; 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()

y el link de la pagina para ver la animacion:

https://jabberwock.archi/maquette/

Muchas gracias !