Jump to content
GreenSock

amirTrujillo

z-index and scrollsmoother issue

Moderator Tag

Recommended Posts

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

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

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

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.

  • Like 2
Link to comment
Share on other sites

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

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

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