How to get links working on un-stacking/scrolling cards

[paulraydon]

Hi everyone,

 

Quite new to GSAP. I've recently got this card "unstacking" animation working by following the docs as well as the advice from this video: 

 

Everything works great, except that the "view" buttons that I have on each of my cards isn't working because of the "postion:absolute" and "z-index" declarations to get the cards stacked before the animation begins. My guess is that the z-index also has to be adjusted on the fly, but I'm having trouble getting my head around that. Does anyone have any insight on how I can modify my code to ensure that the buttons on the cards can be clicked/interacted with while scrolling through?

 

Thanks so much in advance.

I've attached my CodePen of an (almost) working example below:
 

See the Pen XJWXPQj by Paul-Moignard (@Paul-Moignard) on CodePen.

[Rodrigo]

Hi,

 

Basically there are two issues here.

 

First you're just using opacity, that means that the element can still receive focus which blocks the click/touch events on any element under it (stack-wise). You have to combine opacity with visibility: hidden, which is exactly what autoAlpha does

https://developer.mozilla.org/en-US/docs/Web/CSS/visibility#hidden

https://gsap.com/docs/v3/GSAP/CorePlugins/CSS#autoalpha

 

Second you're using a stagger of 0.5 which is equal to the duration of each animation, that means that as soon as one card animation is complete, the next card animation will start immediately (in GSAP the default duration is 0.5). Your stagger time should be longer than that which would create a pause between the end of one animation and the start of the next. Finally give your ScrollTrigger instance more pixels as well with a different end point.

 

Maybe something like this

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

 

Hopefully this helps

Happy Tweening!

[paulraydon]

Thank you Rodrigo,

 

That's really illuminating. Thanks for the detailed explanation. That solves it!