Infinite Slider (request animation frame) + Listen Events

[TerraHQ]

hi there!
I'm having an issue with a custom cursor + event listeners. If you hover over the cards on the codepen you will see that each one has its own color. However, if you hover over one and scroll without moving your mouse, the cards will move but the cursor won't change its color until you move your mouse again. 

Is there any way to make the cursor change color, perceiving the card that has below, without the need of moving my mouse and just through the scroll? I'm sure I cannot be the first person experiencing this 😅

Thank you!

See the Pen gOjwbQV by andresclua (@andresclua) on CodePen

[elegantseagulls]

4 hours ago, thunderfoot said:

However, if you hover over one and scroll without moving your mouse

I cannot get the cards to scroll without moving the cursor on my laptop. You may consider comparing current cursor position with each slide and if the positions overlap, change the color.

[GreenSock]

That doesn't really have anything to do with GSAP (we try to keep these forums focused on GSAP-related stuff, see the forum guidelines) but I believe that has to do with the fact that most browsers don't dispatch mouse/pointer-related events when the mouse/pointer doesn't actually move. It's a performance optimization. So you'll have to manually trigger that stuff. Here's one idea: 

 

// feed in a class name and an event and it'll return the element with that class name that's under the mouse/pointer (if one exists)
function getHoveredElWithClass(name, event) {
  let a = document.elementsFromPoint(event.clientX, event.clientY),
      i = a.length;
  while (--i) {
    if (a[i].classList.contains(name)) {
      return a[i];
    }   
  }
}
let curHoverEl; // keeps track of the currently-hovered element
// listen for wheel events and then when a new ".b--card-b" element is rolled over, dispatch mouseenter/mouseleave events accordingly.
window.addEventListener("wheel", e => {
  let el = getHoveredElWithClass("b--card-b", e) || curHoverEl;
  if (el !== curHoverEl) {
    curHoverEl && curHoverEl.dispatchEvent(new Event("mouseleave"));
    el.dispatchEvent(new Event("mouseenter"));
    curHoverEl = el;
  }
});

See the Pen BaPLzpr?editors=0010 by GreenSock (@GreenSock) on CodePen

 

It's basically using the strategy @elegantseagulls suggested except you're not having to loop through all the cards and check bounds.

 

Does that help at all? 

[TerraHQ]

hey @GreenSock!
I love the feedback!
it's super super super clear.

Appreciate the codepen + notes!

[LenaEvans]

Yeah, it looks good now.