Jump to content
Search Community

Fade background images in / out while scrolling different sections

webdevcanuck test
Moderator Tag

Go to solution Solved by Rodrigo,

Recommended Posts

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

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • Solution
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!

  • Like 1
Link to comment
Share on other sites

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!

  • Like 2
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.
×
×
  • Create New...