GSAP Pinned Scrolling Reveal Sequence - Clickable Links Issue

[Alexo]

Hi Team,

 

Would have re-opened my last post about working on this scroll sequence but cannot find it on the new forum/site 😕

 

Anyway, I have been struggling with finding the 'best' approach to tackling pinned elements that need to have clickable links. If you refer to the pen and see the left text #Link3 will show in its place (no matter what section you are pinned on). As it is pinning the last element (section 3) on top of sections 1 and 2.

 

I have tried a few routes in my actual project:

• Script to get the opacity of the element, then IF > 0.5 then set that on top using z-index.
• A second hidden gasp scroller without any pins and instead just covers the rough area with #hrefs at 100vh each

The first option works but results in the image masks bugging out over each other, any more 'elegant' approach to tackle this issue would be much appreciated!

 

Credits to @Cassie again for her amazing SVG revealer pen's very helpful and other scroll demos that are similar to this

 

Cheers

Alex

See the Pen abQJPOz by alex-rankin (@alex-rankin) on CodePen

[mvaneijgen]

Hi @Alexo, 

 

you can find your post in your profile https://gsap.com/community/profile/139256-alexo/content/

 

I've set your .fluid-reveal__item to  pointer-events: none; by default and then when the animate in I set them to             pointerEvents: "auto" and when they animate away again back to none, this seems to work. There is no logic to scroll to that place on the page, so you still need to implement that, but I hope this gets you off the ground. 
 

See the Pen zYexREB?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

There are loads of examples out there that scroll inside ScrollTrigger most of them use the SrollToPlugin (https://gsap.com/docs/v3/Plugins/ScrollToPlugin)

 

Hope it helps and happy tweening! 

 

See the Pen bGexQpq?editors=0010 by GreenSock (@GreenSock) on CodePen

 

[Alexo]

Hey @mvaneijgen,

 

Perfect! That is exactly what I am after, can't believe I didn't think of setting pointer-events - so obvious in hindsight

 

That other pen is also what I will be adding later on so will take that example an implement as well

 

Thanks

Alex