Jump to content
GreenSock

Alok Paul

GSAP ScrollTrigger animation fade in fade out opacity issue

Go to solution Solved by akapowl,

Recommended Posts

I'm trying to create a timeline section using GSAP ScrollTrigger animation. I've five text blocks (5 timeline elements) with five different images. By default, there will be only one text block visible but after scrolling the hidden text block(2nd text block) will fade up with 100% opacity and the opacity of the previous text block(1st text block) will decrease. When the third one will be active (visible via scroll), the first text block will vanish from the screen and the opacity of the second text block decrease

.

Note: By default, there will be only one active text block. But after scrolling there will be 2 text blocks one will be active with 100% opacity and another will be blur with 50% opacity.

 

For the default state it is working fine but when I'm scrolling the previous text block is not vanishing from the screen. If you guys can take a look at what I did on codepen(https://codepen.io/shuvosd/pen/RwKZEEe) and help me to fix the issue then I will be really very thankful. Thanks in advance.

See the Pen RwKZEEe by shuvosd (@shuvosd) on CodePen

Link to comment
Share on other sites

  • Solution

 

Hey Alok.

 

You don't actually have a tween to fade the 0.2-opacity textblock to 0 again.

In your forEach loop you will have to check for the previousElementSibling's article and add a tween for that to your timeline.

 

    if(elem.previousElementSibling !== null ) {
      
      console.log(elem.previousElementSibling)     
      tl.to(elem.previousElementSibling.querySelector("article"), { autoAlpha: 0 }, i + 0.90)
      
    }

 

Is this what you had in mind?

 

See the Pen 37ac468a6c19614a1cc90a154e01b844 by akapowl (@akapowl) on CodePen

  • Like 3
  • Thanks 1
Link to comment
Share on other sites

4 hours ago, akapowl said:

 

Hey Alok.

 

You don't actually have a tween to fade the 0.2-opacity textblock to 0 again.

In your forEach loop you will have to check for the previousElementSibling's article and add a tween for that to your timeline.

 


    if(elem.previousElementSibling !== null ) {
      
      console.log(elem.previousElementSibling)     
      tl.to(elem.previousElementSibling.querySelector("article"), { autoAlpha: 0 }, i + 0.90)
      
    }

 

Is this what you had in mind?

Yes. Thanks a lot for your help. You made my day. Have a nice day. Stay safe and take care :)

 

 

 

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