Moving diamond shape

Show parts of backgrounds using diamond shape.

by phollome

HTML

<div id="behind"></div>
<div id="front"></div>

CSS

html, body, div {
  margin: 0;
  padding: 0;
}
#behind, #front {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
}
#behind {
  background: yellow;
}
#front {
  background: red;
}
#front.minimized {
  transition: 1s;
  clip-path: polygon(25% 125%, 125% 25%, 225% 125%, 125% 225%);
}
#front.behind {
  transition: 1s;
  clip-path: polygon(-75% 25%, 25% -75%, 125% 25%, 25% 125%);
}
#front.full, #front.full-back {
  transition: 1s;
  clip-path: polygon(-50% 50%, 50% -50%, 150% 50%, 50% 150%);
}

JavaScript

(function () {
  const behind = document.querySelector('#behind');
  const front = document.querySelector('#front');
  front.classList.add('minimized');
  setInterval(() => {
    if (front.classList.contains('minimized')) {
      front.classList.remove('minimized');
      front.classList.add('full');
    } else if (front.classList.contains('full')){
      front.classList.remove('full');
      front.classList.add('behind');
    } else if (front.classList.contains('behind')) {
      front.classList.remove('behind');
      front.classList.add('full-back');
    } else if (front.classList.contains('full-back')) {
      front.classList.remove('full-back');
      front.classList.add('minimized');
    }
  }, 2000);
})();