move_branding

Helloo, I have a image secuence working on scroll with scroll trigger, and it works mostly fine, but when i scroll the whole secuence and i scroll back, the console gives me this error: Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(CSSImageValue or HTMLCanvasElement or HTMLImageElement or HTMLVideoElement or ImageBitmap or OffscreenCanvas or SVGImageElement or VideoFrame)'. Here is the js: gsap.registerPlugin(ScrollTrigger,ScrollSmoother); // Smooth Scroll var smoother = ScrollSmoother.create({ smooth:2,speed:2,effects:!0, }); function checkMedia(media) { if (media.matches) { smoother.kill() } else { smoother } } var m = window.matchMedia('(max-width: 820px)'); checkMedia(m); m.addListener(checkMedia); // Scroll Trigger Image Secuence const canvas = document.getElementById("hero-lightpass"); const context = canvas.getContext("2d"); canvas.width = 800; canvas.height = 500; const frameCount = 1100; const currentFrame = (index) => `/dist/images/animacionlonglow/naw_test${(index + 1).toString().padStart(4, "0")}.png`; const images = []; const airpods = { frame: 0 }; const imageUrls = []; for (let i = 0; i < frameCount; i++) { imageUrls.push(currentFrame(i)); } for (let i = 0; i < imageUrls.length; i++) { const img = new Image(); img.src = imageUrls[i]; images.push(img); } gsap.from(".scroll-title", { opacity: 0, y:100, duration: 1, delay: 3, }); gsap.to(airpods, { frame: frameCount + 1, snap: "frame", ease: "none", scrollTrigger: { trigger: ".canvas-container", start: "top top", end: "+=12000", pin: true, scrub: 0.5, onUpdate: render, images[0].onload = render; function render() { context.clearRect(0, 0, canvas.width, canvas.height); context.drawImage(images[airpods.frame], 0, 0); // . Texts Appear on Scroll / Frames if (airpods.frame >= 100 && airpods.frame < 310) { document.querySelector('#section-text-1').classList.add('active'); } else { document.querySelector('#section-text-1').classList.remove('active'); } if (airpods.frame >= 450 && airpods.frame < 600) { document.querySelector('#section-text-2').classList.add('active'); } else { document.querySelector('#section-text-2').classList.remove('active'); } if (airpods.frame >= 700 && airpods.frame < 900) { document.querySelector('#section-text-3').classList.add('active'); } else { document.querySelector('#section-text-3').classList.remove('active'); } if (airpods.frame >= 990 && airpods.frame < 1200) { document.querySelector('#section-text-4').classList.add('active'); } else { document.querySelector('#section-text-4').classList.remove('active'); }; }; Let see if someone know the issue, and also can give me a good way to preload all the image secuence before loading the page. Thanks a lot