I'm using the CSS clip-path property to create some transitions between images when they are visible on the screen.

Right now, as the user scrolls down the page, they will see each image "open" up from the bottom of the image to the top, like a garage door, for example.

When the user scrolls past the image, the image "closes" from the top of the image to the bottom.

What I would like to happen, is to have the image open as it currently does, and then close in the same direction - so, once the full image is visible on the screen, the user scrolls down, and the image closes from the bottom to the top. I have tried various values for img.show { clip-path: inset(...) }, but so far I have not been able to make this happen. Any idea on how to do this?

codepen: https://codepen.io/jon424/pen/xxPmqZV

HTML

<h1>Scroll down!</h1>

<img src="https://picsum.photos/200/300">
<img src="https://picsum.photos/200/301">
<img src="https://picsum.photos/200/302">
<img src="https://picsum.photos/200/303">
<img src="https://picsum.photos/200/304">
<img src="https://picsum.photos/200/305">
<img src="https://picsum.photos/200/306">

CSS

body {
  margin: 0 30% 0 30%;
}

img {
  display: block;
  transition: clip-path 600ms;
    clip-path: inset(100% 0 0 0);
}

img.show {
clip-path: inset(0);
}

img:nth-of-type(odd) {
  margin-left: auto;
}
img:nth-of-type(even) {
  margin-right: auto;
}

JS

const options = {
  root: null,
  rootMargin: '0px',
  threshold: 0.8
}

const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      entry.target.classList.add('show')
    } 
    else {

      entry.target.classList.remove('show')
    }
  })
}, options)

document.querySelectorAll('img').forEach(img => observer.observe(img))