fade-in Achieve Fade In Feature on Children Div inside Stacks Container

[jeycraz]

Hello to all the professionals out there, I'm working to implement the feature reveal bottom when scrolling as shown in the GSAP

See the Pen BaowPwo by GreenSock (@GreenSock) on CodePen

. But I want to add a feature where it implements a fade-in feature as I slowly scroll through section .panel. For example, when I'm about to scroll until the end of image 1. It will slowly reveal,(opacity:1) image 2 along with the words. 

I also have an additional problem in my codepen, somehow when I put them inside the parent container of display:flex,flex-direction:column,i am expecting my header(h1) will be shown as a display: block. I am not sure why it floats on top of the pin-container#container.

The methods, i have used its actually looping through the toarray.panel(:not:first) but somehow, because my .panel is stacked together because of position absolute, the scrollTrigger of opacity:0-1 somehow triggers when its in contact of the #Container.

If anyone reads this, please help me. THANKIUUU!!! Really thank you for your precious times!!
 

See the Pen jOoNbap by Jeremy-Chong-chee-Yuan (@Jeremy-Chong-chee-Yuan) on CodePen

[mvaneijgen]

Hi @jeycraz welcome to the forum! 

 

The best thing to do when working with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. This way you can focus on one part at a time and it will save a lot of headache when debugging. 

 

I've written a guide how you can create any card stacking effect using a simple base. I think your struggle here is that you have to many ScrollTriggers controlling to many animations. As you can see in my post below all this can be done with just one timeline and one ScrollTrigger, check it out!

 

Check it out here a modification on the logic shared in the post with your animation requirements, showing you how you can implement something like this. I've written the tweens out by hand, doing this allows you to see patterns emerge which will make it easier to convert this to dynamic code. Hope it helps and happy tweening! 

 

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

[jeycraz]

@mvaneijgen Yeah, maybe I'm too focused on animating on my scrollTrigger. Really really appreciate for pointing out step by step on how to do animation with stacks cards. Your logic is concise and clear!