What is GSAP
GreenSock Animation Platform (GSAP) is a well-known suite of JavaScript tools for creating web animations.
#index.html
...
<div class="mouse-icon">
<div class="scroll-icon"></div>
</div>
...
#style.css
.mouse-icon {
border: 2px solid #fff;
width: 40px;
height: 70px;
display: flex;
align-items: flex-end;
justify-content: center;
border-radius: 50px;
padding: .6em;
margin: 1em;
}
.mouse-icon .scroll-icon {
width: 8px;
height: 16px;
background-color: #fff;
border-radius: inherit;
}
#Output
We utilize GSAP to animate the scroll icon.
Import core gsap js first, then write the animation part.
#main.js
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script>
<!-- GSAP scroll icon animation -->
<script>
gsap.from('.scroll-icon',{
y:-30,duration:1,repeat:-1,yoyo:true
})
</script>