How can I add fade out to each of the section?

[jacksmug]

Hi everyone, how can I add fade out to each of the section after almost finish sliding here? I tried to put autoAlpha to this part
 

gsap.to(sections, {
  y: -120,
  autoAlpha: 0,
  ease: "none",
  scrollTrigger: {
    trigger: sections,
    containerAnimation: scrollTween,
    start: "center 80%",
    end: "center 20%",
    scrub: true,
    id: "2"
  }
});

But it doesn't work, it will fade out the whole container. Somebody can help me what am i doing wrong here?

See the Pen poqzvvr by syedzaquan (@syedzaquan) on CodePen

[mvaneijgen]

Hi @jacksmug I've moved your question to its own topic.

 

You will have to create new tweens with their own ScrollTrigger that are positioned where you want them to do certain things. 

 

Most of the ScrollTrigger tweens in the example are optimised, because the person who made it knew they just wanted one tween, so they used single GSAP tweens, but if you want to have more tweens to happen you are almost always better of using a timeline.

 

I've enabled markers (but they behave a bit weird in this demo) so you can better see what is happening where. I've created a new ScrollTrigger timeline with the first text fading out and I've converted the box-1 tween to a timeline and add a fade out with opacity to the timeline.

 

I think you're better of creating your own demo with the demo you've shared as a reference. The scrollTween just moves everything to the left and all the other tweens below it watch that tween for everything they do with this line in there ScrollTrigger object containerAnimation: scrollTween,

 

Hope it helps and happy tweening! 

 

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

[jacksmug]

Hi @mvaneijgen, I understand what are you trying to say but at the moment i'm still new to Javascript and I don't have enough experience on it currently. Thanks for your reply and here's the proper demo i've created, cleaner and straight to the point. Now I already have the horizontal scroll but I want to add fade animation for each of the item when scrolled. Thank you!

See the Pen bGObeEP by syedzaquan (@syedzaquan) on CodePen

[mvaneijgen]

Nice job! My suggestion would always be just try something and add that to the demo, that way we can see your thought process and thus better help you. Trying things out is the best way to learn!

 

I've created an extra tween for the frist box and it now fades out when the horizontal markers meet. Let's see how far you can come with this knowledge. Don't worry about that there is a prober way of doing things in Javascript and that you lack that knowledge, just get things off the ground, there is always time to optimise later. 

 

When you get stuck again, just post back here with the things you've tried

 

See the Pen oNJvBWd?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen

 

 

[Rodrigo]

Hi,

 

Maybe something like this:

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

 

Hopefully this helps.

Happy Tweening!