Last element should not fade out when scroll top to bottom or bottom to top

[Boski Mehta 1 Likes (Newbie)]

Hi ,I have fixed the div and fade in fade out the text between them but when the user reaches to the end the last next need to stay rather than fade out. Please check

See the Pen LYmPBLW by boskim (@boskim) on CodePen

[Carl 11,324 Likes (Superhero)]

thanks for the demo.

 

option 1: instead of using a stagger use a loop to create the animations and add them to the timeline. inside your loop run a condition that checks if you're on the last iteration. if yes, don't add that animation to the timeline.

 

option 2: use a function based value for the autoAlpha property in the stagger. with this technique you can run a condition on each target to see if it is the last or not. based on that condition you can return a custom value. here is a demo for option 2

 

See the Pen rNvBQYV by snorkltv (@snorkltv) on CodePen

[Carl 11,324 Likes (Superhero)]

Look for the function-based values section in the Tween docs: https://greensock.com/docs/v3/GSAP/Tween to learn more