Jump to content
Search Community

My cursor doesn't show over gsap animations

clhomme test
Moderator Tag

Go to solution Solved by Rodrigo,

Recommended Posts

Hello everyone! I'm in a bit of a pickle. I've noticed that when I use gsap animations, my custom cursor doesn't show on the screen anymore. I have tried setting the z-index on high, but it doesn't do anything. It's as if gsap created a layer over everything, if that makes sense.

 

Is that normal? What can I do to change this? Thank you very much!

Link to comment
Share on other sites

This sounds like you might be falling into a z-index trap. 👀

Z-index isn't as simple as a lot of people think. For one, setting transforms on elements can put them in an entirely new stacking context. (hello animations)

https://www.freecodecamp.org/news/4-reasons-your-z-index-isnt-working-and-how-to-fix-it-coder-coder-6bc05f103e6c/

GSAP definitely doesn't put a layer over anything, but z-index can be fiddly. 

If this doesn't provide the key and you need more help can you maker us a minimal demo so we can help you debug?

Thanks!

  • Like 1
Link to comment
Share on other sites

  • 2 weeks later...

Hello! Thank you for your answer, and sorry for the delay.

 

I must admit, I'm kind of stumped. I just don't see why it doesn't work. I tried messing with the z-index like you said but to no avail.

 

I'm sorry to post here, as it probably doesn't have anything to do with gsap (the reason why I posted here in the first place is because I've noticed this custom cursor disappear when it hovers over gsap animations, since it shows over the header, but it's probably unrelated).

 

I made a codepen anyway, and I would be really grateful if someone saw something wrong with my code. Thanks!

 

See the Pen XWxLwNo by Dhandelyon (@Dhandelyon) on CodePen

 

(P.S: move the mouse after the pink section, otherwise if you just scroll the cursor is still visible.)

Link to comment
Share on other sites

  • Solution

Hi,

 

What Cassie means by z-index is to have the element on top of everything at all times, something like z-index: 1000; that normally is enough if you have other elements in your page with z-index of their own.

 

Also there is a problem with using pageX and pageY. Those values are relative to the top of the document. If you have a browser window that reports a height of  900px and you scroll 200px down, if you put your mouse pointer at the top of the browser window the value of pageY is going to be 200 and not 0. So as you scroll down the vertical position of the mouse gets further down the screen until after scrolling 900px you'll never see it again unless you scroll up.

document.addEventListener("mousemove", (e) => {
  cursor.style.left = e.clientX + "px";
  cursor.style.top = e.clientY + "px";
});

That works the way you intend.

 

Finally I'd recommend you to use GSAP QuickTo for this as seen in this example:

See the Pen xxpbORN by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

  • Like 1
Link to comment
Share on other sites

12 hours ago, Rodrigo said:

something like z-index: 1000; that normally is enough if you have other elements in your page with z-index of their own

 

(except when it isn't 🙃 - that's what the article I linked to covered. z-index is a lot fiddlier than 'set a higher number')

 

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context

Looks like it wasn't related to z-index though. Thanks for the demo!

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...