save code

src/App.css

@@ -7,6 +7,10 @@ canvas {
   margin: auto;
   display: block;
 }
+
+/*main{
+  height: 300px;
+}*/
 .content {
   position: relative;
   padding: 20px;

src/App.js

@@ -2,14 +2,12 @@ import './App.css';
 import ImageCanvas from './imageCanvas'
 
 const App = () => (
-  <main>
     <ImageCanvas
       scrollHeight={3500}
       width={1440}
       height={1440}
-      numFrames={241}
+      numFrames={240}
     />
-  </main>
 );
 
 export default App;

src/imageCanvas.jsx

@@ -52,9 +52,11 @@ const ImageCanvas = ({scrollHeight, numFrames, width, height}) => {
       return;
     }
 
+    if(frameIndex == 241)  return
+
     const context = canvasRef.current.getContext("2d");
     let requestId;
-
+    console.log(frameIndex)
     const render = () => {
       context.drawImage(images[frameIndex], 0, 0);
       requestId = requestAnimationFrame(render);