Horizontal Scroll Pin and third slide Fade out and while fading last slide come on top using scrolltrigger

[Nishant Rana]

I need within horizontal scroll third side fade out and while fading third side my last slide scroll up with scrub. I don't know why this is not working and have issue on mobile as well.

Thanks in advance
 

See the Pen eYQwdKq by nishant81 (@nishant81) on CodePen

[Rodrigo]

Hi,

 

This is the best I can come up with:

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

 

Hopefully this helps.

Happy Tweening!

[Nishant Rana]

Thanks Rodrigo!!!  let me try this on and then let you know if this work for . Thanks again for spend some time for me thanks

[Rodrigo]

Hi,

 

Just an FYI, I updated the codepen example with a better and more robust alternative:

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

 

Happy Tweening!

[Nishant Rana]

First of all Thanks for you reply Rodrigo this is working fine but i need with the container animation that with in container horizontal scroll  like this demo 

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

 with the same above thanks in advance and last if we could stay some time on last side to see animation

[Rodrigo]

Hi,

 

Those are different setups actually. Honestly I'm a bit lost about what exactly you are trying to do here.

 

This is a fork of the last example using container animation:

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

 

Hopefully this helps.

Happy Tweening!

[Nishant Rana]

Thanks Rodrigo much appreciated . One last thing i need for your help I want the third section appers and stay then animate because the green section appers immediately when horizontal scroll finish thanks 

[Rodrigo]

Hi,

 

The only solution for that is to not use the container animation and add an extra dummy instance at the end of the timeline:

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

 

Hopefully this helps.

Happy Tweening!

[Nishant Rana]

Ok thanks but I have container animation in all sections so how can i approch that kind of animation i am struggling a lot to achive this any idea or any reffrence thanks 

[Rodrigo]

Hi,

 

Sure enough there is a way to achieve that, but it might not be super simple.

 

Unfortunately we don't have the time resources to create custom solutions or tackle complex scenarios for our users in these free forums and this thread already contains a lot of examples and code so you can grasp the concept of how this works. If you want you can hire us on a consulting basis or post in the Jobs & Freelance forums to get help there.

 

Good luck with your project! 👍

Happy Tweening!