Fade background images in / out while scrolling different sections

[webdevcanuck]

Hi there, new to GSAP and I'm wondering if someone can point me in the right direction to achieve this effect:

https://fading-section-template.webflow.io/

 

Basically, the different background images fade in / out as you scroll up and down the different sections / or if the H1 in the next section comes into view.

 

This seems like such an easy task for GSAP, but I've been searching and testing different probable solutions and the closest I've come is this (which is a total hack job):
 

 

Thanks so much in advance!

 

See the Pen xxNrRqV?editors=1111 by webdevcanuck (@webdevcanuck) on CodePen.

[Rodrigo]

Hi @webdevcanuck and welcome to the GSAP Forums!

 

Honestly I think your implementation is quite good, since is just 45 lines of code. You can't do more with less code IMHO, so I wouldn't change a thing about it. If is not broken don't fix it!

 

Happy Tweening!

[webdevcanuck]

On 6/11/2024 at 1:03 PM, Rodrigo said:

Hi @webdevcanuck and welcome to the GSAP Forums!

 

Honestly I think your implementation is quite good, since is just 45 lines of code. You can't do more with less code IMHO, so I wouldn't change a thing about it. If is not broken don't fix it!

 

Happy Tweening!

Thanks @Rodrigo! I just thought there was more of an elegant way of achieving this and if there's "rules" to this sort of effect, like "when scrolling back up, at what point should the previous section trigger the background change?" For instance, when there is a lot of content in the first section, if you scroll all the way down and back up to the first section, the first section's background image doesn't fade in because it still thinks the next section index is active. I guess I can add a position check to see where the scroll position is vs the active scroll trigger.

 

Any suggestions welcomed! Thanks.

[Rodrigo]

On 6/12/2024 at 2:31 PM, webdevcanuck said:

I just thought there was more of an elegant way of achieving this and if there's "rules" to this sort of effect, like "when scrolling back up, at what point should the previous section trigger the background change?"

The elegant way of making something is that the code is a simple as possible so anyone can understand and debug it, and it does what's supposed to. The approach of making everything in as few lines of code or creating a single method that does everything are the sirens calls that will most likely create a bunch of problems down the road.

 

We don't create or state rules for when/how to do things. At most we give recommendations, but that is definitely something clients/designers/UI-UX-Experts normally decide. If it's a personal project, just go with you think looks better.

On 6/12/2024 at 2:31 PM, webdevcanuck said:

when there is a lot of content in the first section, if you scroll all the way down and back up to the first section, the first section's background image doesn't fade in because it still thinks the next section index is active.

I've been fiddling with your demo for a bit and can't replicate the issue. I added a bunch of content to the first section and gave it huge heights (over 200vh) and I'm always seeing the three images fading in and out . Maybe you could try using preventOverlaps and fastScrollEnd:

https://gsap.com/docs/v3/Plugins/ScrollTrigger/?page=1#fastScrollEnd

https://gsap.com/docs/v3/Plugins/ScrollTrigger/?page=1#preventOverlaps

 

Check the video @Carl made on the subject:

https://gsap.com/blog/3-8/#preventoverlaps-and-fastscrollend

 

Hopefully this helps.

Happy Tweening!

[webdevcanuck]

Thanks @Rodrigo, I have a different instance that I've been fiddling around with and I got it to a good state. Just took some playing around with the trigger points, scroll direction and indexes to get it stabilized.

[Carl]

I might not be following what you mean about the trigger points.

But to handle each section fading in its background when it enters the viewport I think this works pretty well just using onEnter and onLeave

 

See the Pen Jjqpmae?editors=0010 by snorkltv (@snorkltv) on CodePen.

[webdevcanuck]

8 hours ago, Carl said:

I might not be following what you mean about the trigger points.

But to handle each section fading in its background when it enters the viewport I think this works pretty well just using onEnter and onLeave

 

 

 

@Carl this is perfect, thank you much!