Cover up previous sections with animation Scroll trigger

[AliBay]

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!

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.. 

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

[Cassie]

Hi @AliBay,

 

By 'make the section dark' do you mean change the colour? And by top section do you mean the first section?

Do you have a minimal demo of what you've tried?

[AliBay]

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? 

[Cassie]

Sure that sounds very possible - what have you tried so far?

[AliBay]

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... 

[Cassie]

Not at all a nonsense solution. You're almost there. ☺️

You can have multiple scrollTriggers, that's ok. So if you're just after an opacity fade on the first section you can do something like this.

 

gsap.to('.blue', {
  opacity: 0,
  scrollTrigger: {
    trigger: '.red',
    start: "top bottom",
    end: "top top",
    markers: true,
    scrub: true,
  }
});

Almost exactly what you wrote except I've swopped out the timeline for a tween as it's just one little fade. 

I've also set it outside of the loop and I'm using the '.red' section as a trigger to fade out the '.blue' section.

Scrub means that the animation is tied to the scroll progress - this animation will start when the top of the red section hits the bottom of the viewport and end when the top of the red section hits the top of the viewport.

Make sense?

See the Pen 466c00ad455cc9d3abeeec40ddc6a05f?editors=0010 by cassie-codes (@cassie-codes) on CodePen

[AliBay]

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

[cobble101]

Hey both! Your messages already helped me a bunch! 
I'm trying to figure out how to add this effect on all of the slides, not only the first one.. 

of course i could write spaghetti code and write it for every section but i was wondering if there's a smarter way...

Best,
Johann

[akapowl]

 

Welcome to the GreenSock forum @cobble101

 

If you would like it to happen for each panel, move the part that is responsible for the fade-out tween into the forEach-loop (after the pinning ScrollTrigger), and follow the logic it had before.

 

I.e. the element you tween on being the panel and the trigger element being the next panel, which you can get via panel.nextElementSibling before the pinning ScrollTrigger is set up - if you get it after that, the panel will not have a sibling, as it will be inside the pin-spacer element.

 

Then you might have to also add a check (e.g. wrap the fade-out ScrollTrigger in an if statement) on wether a next sibling element exists in the first place (and maybe also wether it has the class panel) and you should be good to go.

 

Give it a shot, that should work the way you intended.