[Duplicate image when using gsap scrolltrigger]

3 hours ago, akapowl said:

Добро пожаловать на форум GreenSock@sergei86

 

Для меня это действительно больше похоже на вопрос на холсте, чем на вопрос GSAP; но вам, вероятно, придется убедиться, что вы очистили свой холст, прежде чем рисовать на нем новое изображение. Это также предлагается в этом ответе более старой темы. Надеюсь, это поможет. Удачи.

 

 

Thanks a lot, it really helped.

Now it remains to set up transitions between canvases with different canvas.

[Duplicate image when using gsap scrolltrigger]

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`,
   };