SVG mask cursor not clicking button

[Elicrespo]

Hey guys,

 

Wondering what am I missing to make the button clickable??!  do I need to set up a class an toggle z-index?? I want to keep the small orange ball cursor. And since the SVG that covers the whole page has a higher z-index than the button wrapper "_40vh", why can't I click on it?? 

 

Why is the "_40vh" div above the SVG??

 

Thank you 

See the Pen LYMZMZY?editors=1111 by elicrespo (@elicrespo) on CodePen

[akapowl]

Hello Elicrespo.

I don't think any of this is GSAP related - it's more about SVG, layout in general and CSS styling.

 

We actually like to keep this forum focussed on questions about GSAP, but here are some pointers.

 

 

9 hours ago, Elicrespo said:

I want to keep the small orange ball cursor.

 

If I am not mistaken, you don't see the 'orange' ball because it is set up as a mask - technically it isn't orange at all.

 

I can not give you a proper explanation for this, but if you want it (the mask) to show what it does the other sections, you will probably have to give your .svg_40vh a background-color - in the fork below, I added the same as is on your ._100vh
 

Maybe the MDN docs can help understand better.

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/mask

 

 

 

9 hours ago, Elicrespo said:

Why is the "_40vh" div above the SVG??

 

It is not - your SVG sits on top of it - you said it yourself here:
 

9 hours ago, Elicrespo said:

And since the SVG that covers the whole page has a higher z-index than the button wrapper "_40vh", why can't I click on it?? 

For it to be clickable it is not important that the SVG sits on top of it - you are not somehow replacing your OS's mouse-cursor by moving around an element to imitate cursor movement. And actually the SVG sitting on top of your div is what makes your div not clickable because it now sits between the actual cursor and the div that you want to click on, so the OS's cursor's clicks can not get through to that element.

 

You can see that by right clicking the area you want to click and select 'Inspect element' (or something along those lines) and it will make dev-tools pop up and in the DOM structure tree show you which element it is you have selected.

To work around that problem, I set pointer-events to none on the whole SVG via CSS in the fork below, and only set them to auto on the elements that you actually need/want pointer-events - i.e. your ._100vh elements.

I hope that works more like you had in mind. If you have any more GSAP related questions, let us know.

 

See the Pen xxmOoPa by akapowl (@akapowl) on CodePen

 

[Elicrespo]

Hi @akapowl, 

First, thank you for your response, and I appreciate your help.

The ellipse isn't orange and can be unclear. My bad. 

I also agree that it isn't a GSAP question. 

But it is a GSAP learning project; I have posted a couple of questions regarding the GSAP part, and the context is building animations with GSAP. The middle button section is intentional to learn how I can apply the same GSAP animation on separate sections. 

Next time, I'll strictly post GSAP-related questions. Cheers.