べた塗りのあとにカーテンスライドして画像を表示させる方法

HTMLは以下の通りにする

<!-- スクロールで表示域に入ったら左からべた塗りのあとに画像表示 -->
<div class="photo animation photo1">
<div class="photo-inner"></div>
</div>
<!-- スクロールで表示域に入ったら左からべた塗りのあとに画像表示 -->

2個あれば、以下のように追加する・・・photoの部分をphoto02にしている

<!-- スクロールで表示域に入ったら左からべた塗りのあとに画像表示 -->
<div class="photo02 animation photo2">
<div class="photo-inner"></div>
</div>
<!-- スクロールで表示域に入ったら左からべた塗りのあとに画像表示 -->

フッターにjavascriptを記載する。

<!-- スクロールで表示域に入ったら左からべた塗りのあとに画像表示 -->
<script>
    const showElements = document.querySelectorAll(".animation")
    window.addEventListener("scroll", function(){
    for(let i = 0; i<showElements.length; i++){
       const getElementDistance = showElements[i].getBoundingClientRect().top + showElements[i].clientHeight * .5;
      if(innerHeight > getElementDistance){
        showElements[i].classList.add('show');
      }
    }
    })
</script>
<!-- スクロールで表示域に入ったら左からべた塗りのあとに画像表示 -->

CSSを以下のように記載する

/* スクロールで表示域に入ったら左からべた塗りのあとに画像表示 */
	.photo{
        width: 100%;
        height: 50vh;
    }
	.photo02{
        width: 100%;
        height: 30vh;
    }
    .photo-inner{
        height: 100%;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
    .photo1 .photo-inner{
		background:url(images/message_img.jpg);
    }
	.photo2 .photo-inner{
		background:url(images/message_bottombg.jpg);
    }
    .animation{
        position: relative;
        overflow: hidden;
    }
    .animation::before{
        content: '';
        display: block;
        position: absolute;
        top:0;
        left: 0;
        z-index: 1;
        width: 100%;
        height: 100%;
        background-image: linear-gradient(90deg, #a0dfff 0%, #eabdfa 100%);
        transform: translatex(-100%);
    }
    @keyframes showMask{
        0%{
            transform: translateX(-100%);
        }
        45%,50%{
             transform: translate(0%);
        }
        100%{
            transform: translateX(100%);
        }
    }
    .animation.show::before{
        animation: showMask 1s forwards;
    }
    .animation .photo-inner{
        opacity: 0;
		background-size: cover;
    }
    @keyframes showElements{
        0%{
            opacity: 0;
        }
        100%{
            opacity: 1;
        }
    }
    .animation.show .photo-inner{
       animation: showElements .01s .6s forwards;
    }

/* スクロールで表示域に入ったら左からべた塗りのあとに画像表示 */

参考サイトにしたサイト　⇒　https://web-design-note.net/2023/07/04/animation-curtain-mask/

このサイトも同じかも　⇒　https://web.runland.co.jp/frontend/post-2944
似たことをしているサイト　https://www.kamikochi.or.jp/