åå Circle Page Transition





  1. Tutorials
  2. CSS
  3. Circle Page Transition

Circle Page Transition

In this tutorial, you will learn how to create an inifnite Circle Page Transition using pure CSS. Watch the video below for a detailed tutorial.

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%);
  }
}