CODEWITHSUNDEEP
javascriptgsap
Burger Sasha
Burger Sasha

Reputation: 175

Custom cursor - Grow on Hover

I have a custom cursor I am trying to animate on link hover. I want the outer Cursor ring to grow in scale on link hover

I tried calling this function, however it's not working and the cursor disappears from the document

function growOnHover() {
link.addEventListener("mouseover", function() {
   TweenMax.to(outerCursor, 1, {scale: 2})
});

growOnHover();

Does anyone have any suggestions on what I'm doing wrong or how to make this work correctly?

// set the starting position of the cursor outside of the screen
var clientX = -300,
    clientY = -300,
// elements 
    outerCursor = document.querySelector(".cursor--outer"),
    innerCursor = document.querySelector(".cursor--inner"),
    link = document.querySelector(".link")

var initCursor = function() {
  // add listener to track the current mouse position
  document.addEventListener("mousemove", function(e) {
    clientX = e.clientX
    clientY = e.clientY
  });
  
  var render = function() {
    TweenMax.set(outerCursor, {
      x: clientX,
      y: clientY,
      delay: .08,
      ease: Power1.easeOut
    });
    
     TweenMax.set(innerCursor, {
      x: clientX,
      y: clientY
    });
    
    requestAnimationFrame(render);
  };
  
  requestAnimationFrame(render);
};

initCursor();
body {
  background-color: #ffff;
  width: 100%;
  height: 100vh;
  padding: 0;
  margin: 0;
  cursor: none;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Outer Cursor Circle */
.cursor--outer {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid #232323;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  position: fixed;
  left: 0;
  top: 0;
  pointer-events: none;
}

/* Inner Cursor Circle */
.cursor--inner {
  width: 4px;
  height: 4px;
  position: fixed;
  left: 10px;
  top: 10px;
  border-radius: 50%;
  z-index: 11000;
  background:#232323;
}

/* Google Link */
.link {
  cursor: none; 
  padding: 30px;
  transition: opacity 1s;
}

.link:hover {
  opacity: .2;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js"></script>

<!-- cursor elements -->
<div class="cursor cursor--outer"></div>
<div class="cursor cursor--inner"></div>
  
<!-- google link -->
<a href="https://google.com" class="link" target="_blank">Google</a>

Upvotes: 1

Views: 2229

Answers (1)

Zach Saucier
Zach Saucier

Reputation: 25984

Your JS is broken. Fix the errors and it works just fine:

// set the starting position of the cursor outside of the screen
var clientX = -300,
    clientY = -300,
// elements 
    outerCursor = document.querySelector(".cursor--outer"),
    innerCursor = document.querySelector(".cursor--inner"),
    link = document.querySelector(".link")

var initCursor = function() {
  // add listener to track the current mouse position
  document.addEventListener("mousemove", function(e) {
    clientX = e.clientX
    clientY = e.clientY
  });
  
  var render = function() {
    TweenMax.set(outerCursor, {
      x: clientX,
      y: clientY,
      delay: .08,
      ease: Power1.easeOut
    });
    
     TweenMax.set(innerCursor, {
      x: clientX,
      y: clientY
    });
    
    requestAnimationFrame(render);
  };
  
  requestAnimationFrame(render);
};

initCursor();

function growOnHover() {
link.addEventListener("mouseenter", function() {
    TweenMax.to(outerCursor, 1, {scale: 2})
});
link.addEventListener("mouseleave", function() {
    TweenMax.to(outerCursor, 1, {scale: 1})
});
}
growOnHover();
body {
  background-color: #ffff;
  width: 100%;
  height: 100vh;
  padding: 0;
  margin: 0;
  cursor: none;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Outer Cursor Circle */
.cursor--outer {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid #232323;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  position: fixed;
  left: 0;
  top: 0;
  pointer-events: none;
}

/* Inner Cursor Circle */
.cursor--inner {
  width: 4px;
  height: 4px;
  position: fixed;
  left: 10px;
  top: 10px;
  border-radius: 50%;
  z-index: 11000;
  background:#232323;
}

/* Google Link */
.link {
  cursor: none; 
  padding: 30px;
  transition: opacity 1s;
}

.link:hover {
  opacity: .2;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js"></script>

<!-- cursor elements -->
<div class="cursor cursor--outer"></div>
<div class="cursor cursor--inner"></div>
  
<!-- google link -->
<a href="https://google.com" class="link" target="_blank">Google</a>

It's best to use mouseenter instead of mouseover because mouseover fires constantly while hovering the element while mouseenter fires only when the cursor enters the element.

P.S. You're much more likely to get a faster response over on the GreenSock forums.

Upvotes: 2

Related Questions