Estoy usando la propiedad clip-path CSS para crear algunas transiciones entre imágenes cuando están visibles en la pantalla.

En este momento, a medida que el usuario se desplaza hacia abajo en la página, verá que cada imagen se "abre" desde la parte inferior de la imagen hasta la parte superior, como la puerta de un garaje, por ejemplo.

Cuando el usuario se desplaza más allá de la imagen, la imagen se "cierra" desde la parte superior de la imagen hasta la parte inferior.

Lo que me gustaría que sucediera es que la imagen se abriera como lo hace actualmente y luego se cerrara en la misma dirección, de modo que, una vez que la imagen completa esté visible en la pantalla, el usuario se desplaza hacia abajo y la imagen se cierra desde la parte inferior. a la cima. He probado varios valores para img.show { clip-path: inset(...) } , pero hasta ahora no he podido hacer que esto suceda. ¿Alguna idea de como hacerlo?

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))