Alok Paul Posted April 7, 2021 Share Posted April 7, 2021 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 More sharing options...
Solution akapowl Posted April 7, 2021 Solution Share Posted April 7, 2021 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 3 1 Link to comment Share on other sites More sharing options...
Alok Paul Posted April 7, 2021 Author Share Posted April 7, 2021 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 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now