Scrolling Animation Tutorial

[CooKachoo]

Hello,

I am working on a project based on this tutorial. Everything was proceeding smoothly until I attempted to implement an animated mask effect. However, I’ve encountered an issue where the effect is disrupted because the previous frame remains visible as my images progressively shrink. Is there a straightforward solution to this problem?

Here is my work: https://codepen.io/PMMeThatTummyGirl/pen/zYbNqPM

Thanks in advance!

[kicken]

Your later images have large transparent areas around the outside. That is why the previous frame shows through. If you want to hide the previous frame, you need to either make that area of the image not transparent, or fill the canvas with your desired background color before drawing the current image.

const updateImage = index => {
  img.src = currentFrame(index);
  context.fillStyle='#fff';
  context.fillRect(0, 0, canvas.width, canvas.height);
  context.drawImage(img, 0, 0);
}

[CooKachoo]

Many thanks! That is exactly what I needed!