sergei86

Thanks a lot, it really helped. Now it remains to set up transitions between canvases with different canvas.

Hi all. I have such a problem. When creating a frame transition effect with images, duplication occurs if the image has a transparent background. Tell me, please, how to fix this? function animateOnScroll(canvasID, videoInfo) { const canvas = document.getElementById(canvasID); const canvasContext = canvas.getContext('2d'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; for (let i = 0; i <= videoInfo.totalFrames; i++) { const img = new Image(); img.src = videoInfo.currentImage(i); videoInfo.images.push(img); } gsap.to(videoInfo, { currentFrame: videoInfo.totalFrames, snap: 'currentFrame', ease: 'none', scrollTrigger: { trigger: canvas, start: 'top', end: `bottom+=${videoInfo.totalFrames * videoInfo.totalTime}`, scrub: 2, pin: true, // markers: true, }, onUpdate: render, }) videoInfo.images[0].onload = () => { canvasContext.drawImage(videoInfo.images[0], 0, 0); } function render() { canvasContext.drawImage(videoInfo.images[videoInfo.currentFrame], 0, 0); } } gsap.registerPlugin(ScrollTrigger); const videoPresentInfo = { totalFrames: 73, totalTime: 5, images: [], currentFrame: 0, currentImage: (index) => `../images/frames/presents/${index}.webp`, };