.images{
    display:flex;
    height:100vh;
    width:100vw;
    top:0;
    left:0;
    position:absolute;
    overflow:clip;
}
.images .image-container{
    position:absolute;
}
.image-container:nth-child(2){
  transition: clip-path 1.2s cubic-bezier(0.63, -0.16, 0.26, 0.96);
}

/* state change (example: on hover) */
.image-container:nth-child(2):hover{
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
.images .image-container img{
    height:100vh;
    width:100vw;
}

.images .image-container{
  inset: 0;
  z-index: 0;

  /* default: CLOSED (hidden) */
  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);

  transition: clip-path 1.2s cubic-bezier(0.63, -0.16, 0.26, 0.96);
  will-change: clip-path;
}

.images .image-container img{
  width: 100vw;
  height: 100vh;
  object-fit: cover;
}

/* slides that should be fully visible (under + active) */
.images .image-container.is-under,
.images .image-container.is-active{
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

/* layering */
.images .image-container.is-under{ z-index: 1; }
.images .image-container.is-active{ z-index: 2; }

@media (prefers-reduced-motion: reduce){
  .images .image-container{ transition: none; }
}