Jump to content
Search Community

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

jacksmug test
Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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



  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...