Buggy behavior when cursor changes on hover from one to another

[sterkinonline]

Hi community,

 

I try to add a class to my cursor div when hovering a specific section. I want to change the cursor to something different when you hover this section. But somehow the class is constantly added/removed when hovering the specific section.

 

How can I fix this? Or is there a better way to achieve my goal? So there should be two (or more) different cursors depending where you interact with the mouse. 

 

See my codepen:

 

 

Thank you very much in advance for solving my problems, having a blast with GSAP :) 

See the Pen ExMzYNQ by Blumee (@Blumee) on CodePen

[Cassie]

Hiya!

 

You need to add pointer-events: none to that circle. It's interfering with the mouse events at the moment.

Also just a heads up, but this is very old syntax. There's no TweenLite anymore - it works for now but we may deprecate it in future versions so it's best to use the latest.
 

// old
TweenLite.to(circle, 0.3, {
  opacity: 1,
  scale: 1,
});

// current v3 syntax
gsap.to(circle, {
  duration: 0.3,
  opacity: 1,
  scale: 1,
});

There's also a more performant way to animate on mousemove - quickTo. 

 

Here's a demo

https://gsap.com/docs/v3/GSAP/gsap.quickTo()/

 

Hope this helps!