Share Posted April 21 Hi, I'm trying to implement a custom cursor I made a while ago with scrollsmoother. I'm having trouble making the cursor appear between the background and the text. Everything works great if I remove the z-index in the cursor and scrollsmoother. Am I missing something? Thanks in advance. See the Pen poxNGyz by amir-trujillo (@amir-trujillo) on CodePen Link to comment Share on other sites More sharing options...
Share Posted April 21 Hi @amirTrujillo welcome the to club (Greensock) 🎉  What is exactly the issue? I see a dot that forms to the button shape when hovering. I've tested all buttons and tested on both Safari 16.3 and Chrome 112.0.5615.137 and it's working to me.  Do you maybe have a browser version and OS on which you've the problem and maybe a screenshot of what it should look like vs what it looks like now? Link to comment Share on other sites More sharing options...
Author Share Posted April 21 37 minutes ago, mvaneijgen said: Hi @amirTrujillo welcome the to club (Greensock) 🎉  What is exactly the issue? I see a dot that forms to the button shape when hovering. I've tested all buttons and tested on both Safari 16.3 and Chrome 112.0.5615.137 and it's working to me.  Do you maybe have a browser version and OS on which you've the problem and maybe a screenshot of what it should look like vs what it looks like now? Thanks!  I have tested both Bing and Chrome, and everything works perfectly except for the button's text that appears beneath the cursor. The cursor has a slight opacity that allows you to see the text, but I want it to appear in front of the cursor. I created another pen without smoothscroll to show how I wanted it to appear. See the Pen qBJqwWe by amir-trujillo (@amir-trujillo) on CodePen Link to comment Share on other sites More sharing options...
Share Posted April 21 Ah - I'm afraid that you can't have position: fixed elements inside a transformed container. And the way that z-index works is going to prevent you from overlaying the button text if the cursor is outside of the container housing the buttons. Maybe you could put the cursor behind the transformed container and make sure the backgrounds are transparent? See the Pen gOBLJZE?editors=0100 by GreenSock (@GreenSock) on CodePen Alternately you might be able to use position absolute and then use some maths to offset by the scroll? Sorry I can't help more, this is landing pretty squarely in the 'browsers can't do this' camp. 2 Link to comment Share on other sites More sharing options...
Share Posted April 21 If you needed the cursor above the text in some other places you could have two cursors following the mouse, one position fixed *above* the content and one behind and then opacity toggle as and when you need Link to comment Share on other sites More sharing options...
Author Share Posted April 21 1 hour ago, Cassie said: If you needed the cursor above the text in some other places you could have two cursors following the mouse, one position fixed *above* the content and one behind and then opacity toggle as and when you need Thanks for the answer. I thought about using two cursors but hoped for an easier way. As for the math, it's possible, but I'm concerned it might take up too much processing power just for a cursor (the site is heavy as it is). 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