How to Add smooth fade in effect to the slider in gsap on horizontal scroll?

[Zain12]

I have prepared a slider using gsap and react. My slider is working fine but I want the slides(Text and Image makes one slide) to be smoothly faded in when a user reaches them by scrolling. Your response would mean alot to me. Regards. Here is the minimal demo. 
 

https://stackblitz.com/edit/react-qwmzt1?file=src%2FApp.js,src%2Fstyle.css

 

[Cassie]

Hi there!

Looks like you're looking for containerAnimation

See the Pen WNjaxKp?editors=0010 by GreenSock (@GreenSock) on CodePen

 

 

[Zain12]

I have already tried this but cant figure out. Can you please have a look on my demo? 

[Rodrigo]

Hi,

 

Please check the example and information about Container Animation, since you're not setting it up on your demo.

 

It should look kind of like this:

const targetText = sections[2].querySelector('.sliderTxt');
gsap.from(targetText, {
  opacity: 0,
  y: 100,
  scrollTrigger: {
    trigger: sections[1],
    containerAnimation: horizontalTween,
    start: 'left center',
    end: 'lef left',
    scrub: 1,
    markers: true,
  },
});

Also is worth noticing that the positions in your example are a bit off, most likely because of some CSS, but I assume that the CSS is different in your real setup. That's why I'm using sections[1] to show sections[2] text's element, but the index should be the same in your real life scenario.

 

Hopefully this helps.

Happy Tweening!

[Zain12]

Thank you so much. Im following the approach suggested by you.  Means alot