<p>Scroll Down</p>

<div clip_wrapper>
  <img class="image" src="https://picsum.photos/300/304">
</div>

<p>Scroll Down</p>


<div clip_wrapper class="wrapper">
  <img class="image" src="https://picsum.photos/1600/904">
</div>

<h1>Hello world</h1>

<hr>

<div clip_wrapper class="wrapper">

  <img class="image" src="https://picsum.photos/1600/903">

</div>

<h1>Hello world</h1>

<hr>

<div clip_wrapper class="wrapper">

  <img class="image" src="https://picsum.photos/1600/902">

</div>

<h1>Hello world</h1>

<hr>

<div clip_wrapper class="wrapper">

  <img class="image" src="https://picsum.photos/1600/901">

</div>

<h1>Hello world</h1>

<hr>

.wrapper {
  overflow: hidden;
  position: relative;
  padding-top: 56.25%;
  max-width: 800px;
  clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
}

.wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

gsap.registerPlugin(ScrollTrigger);
const reveal_duration = 2;
const easing_type = "expo.inOut";

document.addEventListener("DOMContentLoaded", function() {
  const wrappers = gsap.utils.toArray('[clip_wrapper]');
  wrappers.forEach(function(wrapper) {
    gsap.set(wrapper, { clipPath: 'polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%)' });

    ScrollTrigger.create({
      trigger: wrapper,
      start: "clamp(top bottom)", // when the top of the trigger hits the bottom of the viewport
      markers: true,
      onEnter: function() { revealItem(wrapper) }, 
      onLeaveBack: self => self.disable()
    });
  });
  
});/* end DOMContentLoaded */



function revealItem(elem, direction) {
  gsap.to(elem, {
    duration: reveal_duration,
    clipPath: 'polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)',
    ease: easing_type
  });

  gsap.from(elem.querySelector("img"), { 
    duration: reveal_duration * 1.2,
    autoAlpha: 0,
    scrub: 1,
    ease: easing_type,
    scale: 1.2,
    delay: 0.0,
  })
}