z-index and scrollsmoother issue

[amirTrujillo]

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

[mvaneijgen]

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? 

[amirTrujillo]

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

[Cassie]

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.

[Cassie]

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

[amirTrujillo]

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).