Circle Page Transition

HTML

<body>
    <div id="loader"></div>

    <div id="page1" class="page">
        <div>
            <h1>Winterwind Inc.</h1>
            <button onclick="next()">Next</button>
        </div>
    </div>

    <div id="page2" class="page">
        <div>
            <h2>Software Development Agency</h2>
            <button onclick="back()">Go Back</button>
        </div>
    </div>

    <script>
        var loader = document.getElementById('loader');
        var page1 = document.getElementById('page1');
        var page2 = document.getElementById('page2');

        function next() {
            loader.style.animation = 'circleIn 1.5s';
            setTimeout(function() {
                page1.style.display = 'none';
                page2.style.display = 'block';
                loader.style.animation = 'circleOut 1s';
            }, 1300)
        }

        function back() {
            loader.style.animation = 'circleIn 1.5s';
            setTimeout(function() {
                page1.style.display = 'block';
                page2.style.display = 'none';
                loader.style.animation = 'circleOut 1s';
            }, 1300)
        }
    </script>
</body>

CSS

body {
  margin: 0;
  font-family: 'Arial', sans-serif;
}

#loader {
  position: absolute;
  top: 0;
  left: 0;
  background-color: white;
  width: 100%;
  height: 100vh;
  z-index: 99;
  clip-path: circle(0% at 0% 0%);
}

.page {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  text-align: center;
}

.page div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

#page1 {
  background-color: #2e3537;
}

#page2 {
  background-color: #12365f;
  display: none;
}

h1, h2 {
  font-size: 5em;
  color: white;
  margin-bottom: 20px;
}

button {
  background-color: #0380a7;
  font-size: 18px;
  cursor: pointer;
  padding: 10px 25px;
  border-radius: 5px;
  border: none;
  text-transform: uppercase;
  color: white;
  transition: all 0.3s;
}

button:hover {
  background-color: #49aac7;
}

@keyframes  circleIn {
  from {
    clip-path: circle(0% at 0% 0%);
  }
  to {
    clip-path: circle(150%);
  }
}

@keyframes  circleOut {
  from {
    clip-path: circle(150%);
  }
  to {
    clip-path: circle(0% at 0% 0%);
  }
}