The Simple Web (Copy 13676)

✨ Sanpis Poolsilpe

<html>
<head>
	<title>Let's Start</title>
  <style>
    body{
      background:#eee;
      margin:1em;
      font-family:sans-serif;
    }
    .square {
  width: 200px;
  height: 200px;
  background: orange;
}

.square-animation {
    animation: wipe-enter 1s 1;
  }

@keyframes wipe-enter {
	0% {
		transform: scale(0, .025);
	}
	50% {
		transform: scale(1, .025);
	}
}
    h1{
		padding-bottom: 1000px;
    }
  </style>
  <script>const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    const square = entry.target.querySelector('.square');

if (entry.isIntersecting) {
      square.classList.add('square-animation');
	  return; // if we added the class, exit the function
    }

// We're not intersecting, so remove the class!
    square.classList.remove('square-animation');
  });
});

observer.observe(document.querySelector('.square-wrapper'));</script>
  
</head>
<body>
  <h1>
    asdsad
  </h1>
  
  
<div class="square-wrapper">
  <div class="square"></div>
</div>
</body>
</html>