AliBay

@Cassie you are just amazing! thank you so much and have a wonderful weekend!!!!

Thanks for the fast response @Cassie! So, first sorry for my nonsense solution ? but instead of ScrollTrigger.create({ trigger: panel, start: "top top", pin: true, pinSpacing: false }); I used a timeline like this: let tl = gsap.timeline({ scrollTrigger: { trigger: panel, start: "top top", pin: true, pinSpacing: false } }); tl.to(panel, { opacity: 0 }); And if you try it it isn't what I want at all...

Hey @Cassie! Sorry for my bad explanation, so basically in the example in my question I want to make the blue section going dark or make its opacity: 0 as you scroll down and the red section is going over the blue section(want to tie it with ScrollTrigger if possible), so basically I want to make opacity of the first section which is going under second section, 0! is my explanation clear?

Hi all First of all many thanks for this amazing library and I love it. I'm using the example Cover up previous sections with Scroll trigger! https://codepen.io/GreenSock/pen/KKpLdWW what I want to do is that to make the top section which is being covered by the bottom section dark as you scroll. sounds easy with GSAP but I couldn't do it... will be very thankful if someone can give me advice many thanks in advance..

Shaun thank you so so much. with GSAP3 it is was really confusing to work with scroll magic so I was searching for another option. but now I can accomplish all the animations without scrollMagic and just by using GSAP3. thank you