I am trying to achieve a cursor follower effect using gsap, but I am facing issue when I hover over the text in hero section.
I want to increase the circle size when hovered over the hero text and the the text should appear over the circle. I have achieved this effect for menu icon, but not for the text.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<header>
<!-- header content -->
</header>
<div class="circle"></div>
<main>
<section class='hero' data-scroll-section>
<div class="container">
<div class="hero-line">
<div class='line'>
<h1><span>This</span> is text</h1>
</div>
<div class='line'>
<h1>Second line</h1>
</div>
</div>
<div class='hero-text'>
<p>This is paragraph</p>
</div>
<div class='hero-btn'>
<button>Button</button>
</div>
</div>
</section>
</main>
</body>
</html>
header {
padding: 1rem 0;
z-index: 99;
position: fixed;
width: 100%;
background-color: transparent;
}
.circle {
pointer-events: none;
z-index: 97;
position: absolute;
top: 0;
left: 0;
transform: translate(-50%, -50%);
border-radius: 50%;
width: 2vw;
height: 2vw;
background-color: rgb(0, 0, 0);
}
.hero-line {
position: relative;
z-index: 99;
}
var circle = document.querySelector('.circle');
var heroLine = document.querySelector('.hero-line');
window.addEventListener("mousemove", function(dets){
gsap.to(circle, {
x: dets.clientX,
y: dets.clientY,
duration: .3
})
})
heroLine.addEventListener("mousemove", function(dets) {
gsap.to(circle, {
scale: 3,
})
})
heroLine.addEventListener("mouseleave", function(dets) {
gsap.to(circle, {
scale: 1,
})
})