GSAP + Scrolltrigger horizontal scrolling with all section on the same z-index

[Banbeucmas]

Currently, I am trying to have each section scrolling horizontally based on this demo from the site but each section might have a parallax background with speed applied. The problem is that it seems to be intended that each section will have an incremental z-index (Where the latter layer will actually overlap the layer before  it)

 

Is there any way to achieve a fake horizontal scroll effect with all of the supposed sections used for horizontal scrolling on the same layer? Setting zIndex on CSS seem to completely freeze the scroll

See the Pen YzygYvM by GreenSock (@GreenSock) on CodePen

[mvaneijgen]

Hi @Banbeucmas can you show what you've already tried? (even a not working pen) 

 

Just as a site note: The best thing to do with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. 

 

Take a look a this video. It is not what you're making, but the logic how to use ScrollTrigger is a great starting off point 

 

 

[Banbeucmas]

44 minutes ago, mvaneijgen said:

just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. 

 

 

 

Not if the entire page horizontally scrolled is the desired effect and intended function. I know it is insanely counter-intuitive but it is intended since the entire website is based around it.

 

Here is a quick code pen based on the demo above. You can see how the purple background I added is creeping into the description layer.   What I want instead is the background layer to go under it.

See the Pen OJoKmxK by Banbeucmas (@Banbeucmas) on CodePen

 

I understand this is due to the z-index referring to the nearest relative element. My project is in a similar vein though each section has a variable width, I think that's irrelevant.
Hence I asked if it is possible to get every section (In the pen it's the '.panel') on the same layer.

[mvaneijgen]

1 hour ago, Banbeucmas said:

Not if the entire page horizontally scrolled is the desired effect and intended function

Even then! ScrollTrigger is just animating something on scroll, but instead of the playhead just incrementing it is advancing the playhead based on the scroll position. See my fork of your pen, I've disabled ScrollTrigger and the whole container will just move to the left (this is exactly what ScrollTrigger is doing if it is enabled).

 

I've add some duration to the tweens otherwise it will just do it in 0.5 seconds (default duration of a tween in GSAP) and at 4 seconds in I also move the purple background (with the position parameter). 

 

Your question is about the z-index, but can you maybe explain what it is you are trying to do? Maybe there is a really easy solution if we know what the root issue is you're trying to solve. 

 

See the Pen ExeqvaY?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen

[Banbeucmas]

8 minutes ago, mvaneijgen said:

Even then! ScrollTrigger is just animating something on scroll, but instead of the playhead just incrementing it is advancing the playhead based on the scroll position. See my fork of your pen, I've disabled ScrollTrigger and the whole container will just move to the left (this is exactly what ScrollTrigger is doing if it is enabled).

 

I've add some duration to the tweens otherwise it will just do it in 0.5 seconds (default duration of a tween in GSAP) and at 4 seconds in I also move the purple background (with the position parameter). 

 

Your question is about the z-index, but can you maybe explain what it is you are trying to do? Maybe there is a really easy solution if we know what the root issue is you're trying to solve. 

 

 

 

Unfortunately, that's not what I want to do. There are two thing I want to accomplish if I am trying to clarify this part of my post

Quote

You can see how the purple background I added is creeping into the description layer.   What I want instead is the background layer to go under it.

1. Like stated, the .background div should move under the .description div and not above

2. The translateX() effect on .background div (Due to .parallax) should at least run before or right when it comes into view. (Preferably the former)

[Rodrigo]

Hi,

 

I read this a few times and I'm a bit lost about it. Please be more specific about what you're trying to do. If the second section (purple) should go under the first section (blue) and both sections width is 100% when exactly each section should be visible? The purple section has to dissappear completely?

 

This is my kind of approach to this, I don't know if it's closer to what you're after:

See the Pen LYJwryd by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

[Banbeucmas]

9 hours ago, Rodrigo said:

Hi,

 

I read this a few times and I'm a bit lost about it. Please be more specific about what you're trying to do. If the second section (purple) should go under the first section (blue) and both sections width is 100% when exactly each section should be visible? The purple section has to dissappear completely?

 

This is my kind of approach to this, I don't know if it's closer to what you're after:

 

 

 

Hopefully this helps.

Happy Tweening!

That's terrifyingly close. This solved the issue. The only thing I would need is that the entire behavior of the panel to behave the same and only .parallax background will move under. gsap.set() was the way to do it.