Page can’t render normally animated image with lib GSAP

I did animation when scrolling for a picture, cut out a lot of frame-by-frame pictures and made animation, but here’s the problem, when loading the page there is no picture, it appears only if scrolled, and disappears back if scrolled back up, please help…

i think it’s solution in render(), but i don’t know how to solve this. I’m thinking of making it render not only by scrolling, but also just like that when the page loads.

<div class="hero">
                    <div id="home">
                        <canvas></canvas>
                    </div>
                    <div class="about"></div>
                </div>

function sequence_animation() {
        const canvas = document.querySelector('#home>canvas');
        const context = canvas.getContext('2d');
    
        canvas.width = 1500;
        canvas.height = 700;
    
        let imagesLoaded = 0;
        const frameCount = 19;
        const images = [];
        const imageSeq = {
            frame: 0,
        };
    
        function files(index) {
            var data = `
            ../assets/img/animation/1.png
                ../assets/img/animation/1.png
                ../assets/img/animation/1-2.png
                ../assets/img/animation/2.png
                ../assets/img/animation/2-2.png
                ../assets/img/animation/3.png
                ../assets/img/animation/3-2.png
                ../assets/img/animation/4.png
                ../assets/img/animation/4-2.png
                ../assets/img/animation/5.png
                ../assets/img/animation/5-2.png
                ../assets/img/animation/6.png
                ../assets/img/animation/6-2.png
                ../assets/img/animation/7.png
                ../assets/img/animation/7-2.png
                ../assets/img/animation/8.png
                ../assets/img/animation/8-2.png
                ../assets/img/animation/9.png
                ../assets/img/animation/9-2.png
                ../assets/img/animation/10.png
            `;
            return data.split('n')[index].trim();
        }
    
        for (let i = 0; i < frameCount; i++) {
            const img = new Image();
            img.src = files(i);
            images.push(img);
            img.onload = () => {
                imagesLoaded++;
                if (imagesLoaded === frameCount) {
                    render();
                }
            };
        }
    
        window.addEventListener('resize', function () {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
            render();
        });
    
        gsap.to(imageSeq, {
            frame: frameCount - 1,
            snap: 'frame',
            ease: 'none',
            scrollTrigger: {
                scrub: 1,
                pin: false,
                trigger: '.header__list-item.message',
                start: 'left %',
            },
            onUpdate: render,
        });
    
        function render() {
            scaleImage(images[imageSeq.frame | 0], context);
        }
    
        function scaleImage(img, ctx) {
            var canvas = ctx.canvas;
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, canvas.width, canvas.height);
        }
    }
    
    sequence_animation();
})

canvas {
    margin: 0 auto;
    margin-top: -189px;
    display: block;
    aspect-ratio: 16 / 9;
}