Links Don't Work with ScrollTrigger Fade In Text + Image

[Frances Coronel]

Hi there, I forked a CodePen based off this topic: 

The logic in the CodePen worked great for my needs but I found that the logic depends on having the elements with absolute positioning which prevents the links from working. The only link that works is for very last element in the pinned area.

 

gsap.set(elem, { position: "absolute", top: 0 });

 

Is there alternative logic I can use so that the animation stays the same but that the links are clickable?

 

Thank you!

See the Pen WNGrpeb by fvcproductions (@fvcproductions) on CodePen

[akapowl]

 

Hey @Frances Coronel - welcome to the forums  

 

A solution for this could be to

 

1) initially set a specific z-index for each of those sections (the first having the highest, the last having the lowest) - which you could do with GSAP like this

 

  gsap.set(points, {zIndex: (i, target, targets) => targets.length - i});

 

and 2) make sure, that on scroll, you not only just tween the different elements to autoAlpha: 0, but also the section itself. I added this 

 

tl.to(elem, { autoAlpha: 0 }, i + 0.75);

alongside your fade-out tween on the img - and altogether that seems to do the trick.

 

See the Pen 27949f256df82f3193c29cbbffbd82d6 by akapowl (@akapowl) on CodePen

 

 

Let us know, if this works for you or if you see any other issue.

 

Hope this helps.

 

Cheers,

Paul

[Frances Coronel]

This worked marvelously. Thanks, Paul!