Hover even listener doesnt work with GSAP

[momo12]

Hello guys,

I'm not good at coding but I came up with this code but for some reasons the code is not working when hovering over objects or leaving them. Do you know why it's not working? Sorry for my childish question!

See the Pen NWMbZKz by talewoy290 (@talewoy290) on CodePen

[Rodrigo]

Hi,

 

The issue is that you're using querySelector and not querySelectorAll. The querySelector method returns the first element it finds with the passed selector and then stops looking. The querySelectorAll.... well returns all the element it finds

 

This should work as expected:

var hover = document.querySelectorAll(".sss");

hover.forEach((el) => {
  el.addEventListener("mouseenter", (e) => {
    gsap.to(cursor, { scale: 0.5 });
    gsap.to(cursorBorder, { scale: 2 });
  });

  el.addEventListener("mouseout", (e) => {
    gsap.to(cursor, { scale: 1 });
    gsap.to(cursorBorder, { scale: 1 });
  });
});

Also you have  missing slashes in some closing tags:
 

<div class="section-1">
  <div class="img-1 sss"><div><!-- HERE -->
  <div class="space-wr"></div>
  <div class="img-2 sss"><div><!-- HERE -->
  <div class="space-wr"></div>
</div>

Happy Tweening!!!

[momo12]

3 minutes ago, Rodrigo said:

Hi,

 

The issue is that you're using querySelector and not querySelectorAll. The querySelector method returns the first element it finds with the passed selector and then stops looking. The querySelectorAll.... well returns all the element it finds

 

This should work as expected:

var hover = document.querySelectorAll(".sss");

hover.forEach((el) => {
  el.addEventListener("mouseenter", (e) => {
    gsap.to(cursor, { scale: 0.5 });
    gsap.to(cursorBorder, { scale: 2 });
  });

  el.addEventListener("mouseout", (e) => {
    gsap.to(cursor, { scale: 1 });
    gsap.to(cursorBorder, { scale: 1 });
  });
});

Also you have  missing slashes in some closing tags:
 

<div class="section-1">
  <div class="img-1 sss"><div><!-- HERE -->
  <div class="space-wr"></div>
  <div class="img-2 sss"><div><!-- HERE -->
  <div class="space-wr"></div>
</div>

Happy Tweening!!!

You're an angel! Thanks man!

[momo12]

36 minutes ago, Rodrigo said:

Hi,

 

The issue is that you're using querySelector and not querySelectorAll. The querySelector method returns the first element it finds with the passed selector and then stops looking. The querySelectorAll.... well returns all the element it finds

 

This should work as expected:

var hover = document.querySelectorAll(".sss");

hover.forEach((el) => {
  el.addEventListener("mouseenter", (e) => {
    gsap.to(cursor, { scale: 0.5 });
    gsap.to(cursorBorder, { scale: 2 });
  });

  el.addEventListener("mouseout", (e) => {
    gsap.to(cursor, { scale: 1 });
    gsap.to(cursorBorder, { scale: 1 });
  });
});

Also you have  missing slashes in some closing tags:
 

<div class="section-1">
  <div class="img-1 sss"><div><!-- HERE -->
  <div class="space-wr"></div>
  <div class="img-2 sss"><div><!-- HERE -->
  <div class="space-wr"></div>
</div>

Happy Tweening!!!

@Rodrigo Sorry I have a simple question. The hovering doesn't last and sometimes the circle becomes small like there is no hover. 

[Rodrigo]

Hi,

 

The issue is that as soon as the circle catches up with the pointer it sits between the pointer and the image, so as soon as the pointer moves, even one pixel, the pointer is no longer over or inside the image, so the mouseleave event is triggered.

 

I can think of two solutions. One to set up a container for each image with a relative position, add the image and on top of that, with a large z-index value, another container that sits on top of the cursor followers and listen to the mouse enter/leave events in that element, something like this:

<div class="image-wrapper">
  <img src="" alt="" class="" />
  <!-- LISTEN TO THE EVENTS IN THIS NEXT DIV -->
  <div></div>
</div>

The other is to get the coordinates and size of each image with getBoundingClientRect() and check on the mouse move event if the pointer is between those coordinates and play/reverse the animation accordingly:
https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect

 

A third option is to remove the dot in the center using autoAlpha: 0 or scale: 0:

el.addEventListener("mouseenter", (e) => {
  // THIS
  gsap.to(cursor, { scale: 0 });
  // OR THIS
  gsap.to(cursor, { scale: 0.5, autoAlpha: 0 });
  gsap.to(cursorBorder, { scale: 2 });
});

el.addEventListener("mouseout", (e) => {
  // THIS
  gsap.to(cursor, { scale: 1 });
  // OR THIS
  gsap.to(cursor, { scale: 1, autoAlpha: 1 });
  gsap.to(cursorBorder, { scale: 1 });
});

 

Happy Tweening!!!