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