Horizontal Scroll Overlay

[_Moon]

Hello everyone!

 

I'm new to GSAP and i ran into a issue which i can't seem to figure out.

 

So in my pen i have a horizontal scroll with 3 sections, in which i would like for when i'm in the second section the third one overlaps and adds an overlay over it. The thing is i can't seem to figure out how to make the scroll stop on the second section, meaning you'd scroll so the overlay starts to "fade" in while you stay in the same section.

 

The explanation might be a bit confusing, so what I'm trying to do is what happens in this website https://burmester.pt/en/history/ when you reach the last section and overlay appears fadding in and it stays in the same section.

 

I've read the docs over and over but i can't seem to figure out this issue, any help would be appreciated!

 

Thanks in advance!

See the Pen vYmRqEy by ttmino (@ttmino) on CodePen

[akapowl]

 

Hey @_Moon

 

If you wanted it to work just like it does on the website you linked to, you could probably just have each of the sections positioned absolutely (and translated a window's width to the left inititally) and then on scroll (while pinning the container) with a certain logic to it, just tween each of them to 0 one after the other.

 

If you wanted the overlap to happen midst the fake-horizontal scroll like it seems from your demo there, things would get a bit more complicated. I showed one possible way of how to get something like that working in this thread here. Check it out and see if it works for you, too.