ScrollTrigger : Simple fadeIn/fadeOut onEnter/onLeave with scrub

[Houcine]

Hello everyone,

 

I'm working on a project where I'm trying to create a scroll-triggered animation using GSAP's ScrollTrigger plugin. Specifically, I want to achieve an effect where content fades in when it appears on the screen and fades out when it starts to disappear either at the top or bottom of the screen. 

 

I've created a CodePen test to illustrate what I'm trying to accomplish. It's close to what I want to achieve, but there's a specific issue: the text at the top of the screen doesn't fade out when scrolling up; it only fades in/out when it appear at  the bottom.

 

My goal is to have the text fade in when it appears on the screen and fade out when it starts to disappear, whether at the top or bottom. Currently, the fade-out effect only occurs when scrolling down at the bottom.

 

However, I'm struggling to understand how to implement this using GSAP and ScrollTrigger. I've reviewed the documentation, but I'm still unsure about the exact approach I should take to achieve the desired effect.

 

If anyone could provide guidance or a code example demonstrating how to implement this type of animation with GSAP and ScrollTrigger, I would greatly appreciate it.

 

Thank you in advance for your help!

See the Pen PogXwOE by lhoucinecherif (@lhoucinecherif) on CodePen

[PointC]

Welcome to the forum.

 

I'd probably use a yoyo and repeat:1 for the opacity in/out. Also making sure the ease is set to none as this is a scrub:true situation.

 

See the Pen dyLwoej by PointC (@PointC) on CodePen

 

Hopefully that helps. Happy tweening and welcome aboard.

 

[Houcine]

Thank you so much @PointC for your prompt and helpful response! Your suggestion to use yoyo makes perfect sense. I really appreciate your guidance and warm welcome to the forum.

 

I'll be sure to implement your advice and continue exploring the exciting world of GSAP.

 

Thanks again for your support!

Best regards,