My goal is to create a circle animation that fades in based on the user's scroll position. As the user scrolls down, the circle grows larger, and as they scroll up, it shrinks. The animation will pause when the user stops scrolling, requiring them to scroll multiple times to complete it.
Currently, I only have basic CSS and HTML implemented. I need a JavaScript scroll function to trigger the increase or decrease in size of the circle based on the user's scrolling behavior.
.section {
animation: 3s fadeInAnimation reverse;
animation-delay:0s;
animation-timing-function: ease-in-out;
animation-iteration-count: 1;
background: yellow;
height: 100vh;
}
@keyframes fadeInAnimation {
0% {
clip-path: circle(75%);
}
100% {
clip-path: circle(0%);
}
}<div class="section">
<h1>
Section Title
</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tincidunt commodo lacus vitae porttitor. Morbi lobortis diam lorem, sed faucibus leo gravida ac. Curabitur ex velit, consectetur vitae ligula in, fringilla tincidunt turpis. Curabitur sem turpis, scelerisque et pretium in, ornare at dui. Morbi pellentesque viverra rhoncus.
</p>
</div>