Scroll Sequence with .png image work weird

So I working on my project and I want to make some section kind of Apple Scroll Sequence.

But when I convert the image sequence to .PNG, it's awful :(

So, here's the image lookalike when I scroll the section. It's like shadowing / emm I don't know what it is haha.

Here's my codes:

 <div class="intermezo-sequence">
                <div class="sticky-element">
                    <div class="sequence-element">
                        <canvas id="intermezo_canvas"></canvas>
                    </div>
                </div>
            </div>          

const canvas = document.querySelector('#hero_canvas')
const ctx = canvas.getContext('2d')
const heroSequence = document.querySelector('.hero-sequence')
const images = []

var sequence1 = <?= json_encode($sequence1) ?>;
sequence1.sort();
const frameCount = sequence1.length; // biar dinamis total nya
const prepareImages = () => {
    for (var i = 0; i < frameCount; i++) {
        // console.log(sequence1[i]);
        const image = new Image()
        // image.src = `./assets/images/studycase/sequence/${i}.jpg`
        canvas.width = 1928;
        canvas.height = 1000;
        image.src = sequence1[i];
        images.push(image)
        if (i === 0) {
            images[i].onload = () => drawImage1(0)
        }
    }
}

const drawImage1 = frameIndex => {
    ctx.drawImage(images[frameIndex], 0, 0)
}

prepareImages()

const heroSection = document.getElementById("heroSection");
window.addEventListener('scroll', () => {
    const scrollTop = document.documentElement.scrollTop - heroSection.offsetTop
    const maxScrollTop = heroSequence.scrollHeight - window.innerHeight
    const scrollFraction = scrollTop / maxScrollTop
    const frameIndex = Math.max(0, Math.min(frameCount - 1, Math.ceil(scrollFraction * frameCount)))

    images[frameIndex].onload = () => drawImage1(frameIndex)
    requestAnimationFrame(() => drawImage1(frameIndex))
})

Is there anything that I should add to the logic? Thanks!