Animation park

              
<div class="sample01">
  <div class="sample01__imgWrap">
    <div class="sample01__img">
      <img src="http://animation-park.com/wp-content/uploads/2025/05/dandelion.jpg" alt="">
    </div>
    <div class="sample01__img">
      <img src="http://animation-park.com/wp-content/uploads/2025/05/flower.jpg" alt="">
    </div>
    <div class="sample01__img">
      <img src="http://animation-park.com/wp-content/uploads/2025/05/palmtree.jpg" alt="">
    </div>
  </div>
</div>
              
            

              
.sample01__imgWrap{
  display: grid;
  gap: 80px;
}

.sample01__img {
  max-width: 600px;
  margin: auto;

  mask-image: linear-gradient(135deg,
    rgba(0, 0, 0, 1) 50%,
    rgba(0, 0, 0, 0)   70%,
    rgba(0, 0, 0, 0)   100%);
  -webkit-mask-image: linear-gradient(135deg,
    rgba(0, 0, 0, 1) 50%,
    rgba(0, 0, 0, 0)   70%,
    rgba(0, 0, 0, 0)   100%);
  mask-size: 200% 200%;
  -webkit-mask-size: 200% 200%;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: 140% 140%;
  -webkit-mask-position: 140% 140%;
}

.sample01__img.js-mask-animation {
  animation: img-mask-animation 1.3s linear forwards;
}

@keyframes img-mask-animation {
  0% {
    mask-position: 140% 140%;
    -webkit-mask-position: 140% 140%;
  }
  100% {
    mask-position: 0 0;
    -webkit-mask-position: 0 0;
  }
}
              
            

document.addEventListener('DOMContentLoaded', () => {
  const options = {
    root: null,
    rootMargin: '0px',
    threshold: 0.3
  };

  const callback = (entries, observer) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.classList.add('js-mask-animation');
        observer.unobserve(entry.target);
      }
    });
  };

  const observer = new IntersectionObserver(callback, options);

  document.querySelectorAll('.sample01__img').forEach(elm => {
    observer.observe(elm);
  });
});