<main>Main</main>
<footer>Footer</footer>

main {
  width: calc(100% - 200px - 200px - 10px);
  background: red;
  transition: 1s;
}

footer {
  background: green;
  width: 200px;
  clip-path: inset(0% 0% 0% 0%);
  margin-right: 0px;
  transition: 1s;
}

const footer = document.querySelector("footer");
const main = document.querySelector("main");

footer.onclick = () => {
  footer.style.clipPath = "inset(100% 0% 0% 0%)";
  //footer.style.transition = "1s";

  setTimeout(() => {
    // footer.style.marginRight="0px";
    main.style.width = "100%";
  }, 1000);
};