Enabled pinSpacing is blocking clicking on links in section below

[Kinka]

Hi, I'm struggling with making my href links in my Footer to be clickable. When I set pinSpacing to true in section above (Projects component) - empty space below projects is too big, but when I set it to 'false' everything looks great but I am not able to click on links in my Footer. Seems I need to keep z-indexes to keep this 'revealing footer' effect and I'm wondering how to resolve this.

Thank you!

Stackblitz:
https://stackblitz.com/edit/stackblitz-starters-qptd1bix?file=components%2FProjects.tsx


 

[Rodrigo]

Hi,

 

You can reveal the footer using other approach like Clip Path and with a larger z-index value you can have pointer events, as shown in this demo:

See the Pen rNXKeGX by GreenSock (@GreenSock) on CodePen.

 

Hopefully this helps

Happy Tweening!

[Kinka]

Hi, thanks. 😀 I was digging in forum and I found one topic with changing pointer-events in similar problem, and I tried adding this to pinned section in Projects component:
 

onLeave: () => {
	gsap.set(".projectsSection", { pointerEvents: "none" });
},
onEnterBack: () => {
	gsap.set(".projectsSection", { pointerEvents: "auto" });
}

it seems to be working too 🤔

[Rodrigo]

Yeah, whatever works better for you in your particular project is fine, the demo I posted requires a specific setup for the footer and the other sections of the site. If it works it works, so if the code you have in place does what is supposed to, is fine.