GSAP DOT GROWS & SHRINKS ON PAGE SCROLL
GSAP Dot Grows & Shrinks On Page Scroll” is a web animation effect where a dot dynamically changes size as the user scrolls, created using the GreenSock Animation Platform (GSAP).
GSAP DOT GROWS & SHRINKS ON PAGE SCROLL
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollTrigger.min.js"></script>
<script>
gsap.registerPlugin(ScrollTrigger);
gsap.set(".dot", {xPercent: -50, yPercent: -50});
let tl = gsap.timeline({
scrollTrigger: {
trigger: ".block",
start: "top top",
end: "+=100%",
scrub: 0.5,
pin: ".dot"
},
})
tl.from(".dot", {
scale: 0.1,
repeat: 1,
yoyo: true
})
</script>
dot
<div class="block block--1">
<div class="dot"></div>
</div>
<div class="block block--2"></div>
CSS
.block {
width: 100%;
height: 50vh;
}
.dot {
position: absolute;
left: 50%;
top: 50%;
width:150vmax;
height: 150vmax;
border-radius: 50%;
background-color: #E34248;
overflow-x: hidden;
}