clhomme Posted May 23, 2023 Share Posted May 23, 2023 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 More sharing options...
Cassie Posted May 23, 2023 Share Posted May 23, 2023 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! 1 Link to comment Share on other sites More sharing options...
clhomme Posted June 1, 2023 Author Share Posted June 1, 2023 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 More sharing options...
Solution Rodrigo Posted June 1, 2023 Solution Share Posted June 1, 2023 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! 1 Link to comment Share on other sites More sharing options...
Cassie Posted June 2, 2023 Share Posted June 2, 2023 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! 1 Link to comment Share on other sites More sharing options...
clhomme Posted June 2, 2023 Author Share Posted June 2, 2023 Thank you @Rodrigo! It solved the problem. But I have to agree with @Cassie, z-index is kind of a b-word. In fact, setting z-index on high was the first thing I tried - and that's why I went here when that didn't work. Thank you both! 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now