<div class="info">
  <div>
    <div>isInViewport: <span class="viewport">false</span></div>
    <div>positionInViewport: <span class="position">0</span></div>
  </div>
</div>

<div class="scroll-down">Scroll down<br><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="20" height="20" class="arrow">
<path fill="white" d="M483.2,192.2c-20.5-20.5-53.5-20.8-73.7-0.6L257,344.1L104.5,191.6c-20.2-20.2-53.2-19.9-73.7,0.6  c-20.5,20.5-20.8,53.5-0.6,73.7l190,190c10.1,10.1,23.4,15.1,36.8,15c13.3,0.1,26.7-4.9,36.8-15l190-190  C503.9,245.7,503.7,212.7,483.2,192.2z"/>
</svg></div>

<div class="box"></div>

<header>
	<a href="https://greensock.com/scrolltrigger">
		<img class="greensock-icon" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/scroll-trigger-logo-light.svg" width="200" height="64" />
	</a>
</header>

* {
  box-sizing: border-box;
}
body {
  background-color: #222;
  color: #ccc;
  font-size: 17px;
  line-height: 1.4;
  font-weight: 300;
  overscroll-behavior: none;
  height: 400vh;
}

.info {
  position: fixed;
  width: 50vw;
  height: 100vh;
  left: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  align-content: center;
  justify-content: center;
  font-family: monospace;
  font-size: 28px;
  color: white;
}
.info div span {
  color: orange;
}

.box {
  position: relative;
  left: 75%;
  top: 150vh;
  transform: translateX(-50%);
}


h1, h2 {
  color: white;
  font-weight: 400;
}
h1 {
  font-size: 40px;
}

.box {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: dodgerblue;
  line-height: 100px;
  border-radius: 10px;
}
.scroll-down {
  color: white;
  text-align: center;
  position: relative;
  left: 75%;
  top: 50vh;
  transform: translate(-50%, -50%);
}

@media (max-width: 800px) {
  .info {
    font-size: 17px;
  }
}

gsap.registerPlugin(ScrollTrigger);

let viewport = document.querySelector(".viewport"),
    position = document.querySelector(".position"),
    box = document.querySelector(".box");

ScrollTrigger.create({
  start: 0,
  end: "max",
  onUpdate: updateValues
});

function updateValues() {
  viewport.innerText = ScrollTrigger.isInViewport(box);
  position.innerText = ScrollTrigger.positionInViewport(box, "center").toFixed(2);
}
updateValues();






// scroll down arrow animation
gsap.to(".arrow", {y: 12, ease: "power1.inOut", repeat: -1, yoyo: true});