metatarz/index.html

## index.html
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Reactive CSS Animations </title>
  <style>
    .long{
      background-color: #137b85;
      height: 100vh;
      width: 100vw;
    }
    #loading {
    display: inline-block;
    width: 50px;
    height: 50px;
    border: 3px solid rgba(255,255,255,.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spin 1s ease-in-out infinite;
    animation-play-state: paused;
    }
  </style>
  <script>
    document.addEventListener("DOMContentLoaded", function() {
    const smartAnimation= document.querySelector("#loading");

  if ("IntersectionObserver" in window) {
    let smartAnimationObserver = new IntersectionObserver(function(entries, observer) {
      entries.forEach(function(entry) {
        if (entry.isIntersecting) {
          entry.target.style.animationPlayState= "running"
          console.log('running')
        }else{
          entry.target.style.animationPlayState = "paused"
          console.log('paused')
        }
      });
    });

    smartAnimationObserver.observe(smartAnimation)

  }
});
  </script>
</head>
<body>
  <h1>Reactive CSS Animation</h1>
  <h4>Test your own implementation<a href="https://audits.digital">here</a></h4>
  <section class="long">
    <div id="loading"></div>
  </section>
</body>
</html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Reactive CSS Animations </title>
	<style>
	.long{
	background-color: #137b85;
	height: 100vh;
	width: 100vw;
	}
	#loading {
	display: inline-block;
	width: 50px;
	height: 50px;
	border: 3px solid rgba(255,255,255,.3);
	border-radius: 50%;
	border-top-color: #fff;
	animation: spin 1s ease-in-out infinite;
	animation-play-state: paused;
	}
	</style>
	<script>
	document.addEventListener("DOMContentLoaded", function() {
	const smartAnimation= document.querySelector("#loading");

	if ("IntersectionObserver" in window) {
	let smartAnimationObserver = new IntersectionObserver(function(entries, observer) {
	entries.forEach(function(entry) {
	if (entry.isIntersecting) {
	entry.target.style.animationPlayState= "running"
	console.log('running')
	}else{
	entry.target.style.animationPlayState = "paused"
	console.log('paused')
	}
	});
	});

	smartAnimationObserver.observe(smartAnimation)

	}
	});
	</script>
	</head>
	<body>
	<h1>Reactive CSS Animation</h1>
	<h4>Test your own implementation<a href="https://audits.digital">here</a></h4>
	<section class="long">
	<div id="loading"></div>
	</section>
	</body>
	</html>