Banbeucmas

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.

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 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)

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. https://codepen.io/Banbeucmas/pen/OJoKmxK 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.

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 https://codepen.io/GreenSock/pen/YzygYvM

It's interesting that it's actually another way around. A normal refresh would cause the issue, hot reloading is where the expected behavior works. Anyway, thanks for the help. Cheers

Seem like it is due to the dev environment on hot reload. You are on point with that. Guess I can consider this a ReactJS issue then

My apologies, typing at 3AM seems to mess this post up a lot. I will try to clarify I have updated the pen, the template I used use #root but I used #page over my codebase. I overlooked this part when I was trying to clean up this from my code base Your solution seem to solved the current issue I have with resizing. I was trying to have the scroll bar to covers all of the .sections. The ending effect should look like how this pen horizontal scroll works but with variable width (Pardon me for using the Snapping example here, I only care for the horizontal section) https://codepen.io/GreenSock/pen/YzygYvM Let me reword what I said. I reworded this based on the solution you proposed but seems like the issue still persists. Though replicating this through a simplified pen isn't easy , I will try to provide some image though This is the browser when the scrollbar reached the end, I am using Chrome Dev Tool (Layer Tool) and highlighting the scrollbar for easier visualization. As you can see, this is on first load of the page. With the current fix above you can see how some of the last section is still being left out (Those are to the right of the highlighted section) Now, when ReactJS re renders (Due to code change). My scrolling position resets to 0, yet Now all of the elements are correctly calculated. And scrolling seems to covers all of the section I am willing to provide more details in private but sadly I haven't found a way to replicate this on a pen

Hi, I am back trying to make a horizontal layout using GSAP though it doesn't seem to work properly, here is my codesandbox. https://codesandbox.io/p/sandbox/cranky-leaf-nop4s3 The two problem here is 1. It doesn't seem to respect height: 100% on #page element, I think it's probably due to pin spacer but I am not sure myself. Relevant thread I checked doesn't seem to give me a concise solution 2. Resize inconsistency. What I expected between resizing is that the scroll should go to the last end of the last section. As it can be seen, the translate() function stops at -2675px while the total calculated maxWidth is 2710px. From App.tsx, I am currently using invalidateOnRefresh for this purpose. You can see that this becomes slightly more erratic the more you try to resize 3. This is a probably bit related to 2 but I have no confidence in being able to fully replicate this here. ReactJS seem to act a bit funny with gsap where the xOffset value tends to be inaccurate on first load (Similar demonstration as 2), but once initiating a hot-swap, the values line up. (Though there are case where one of the element reportedly shows the wrong size on both function until hot swap as well, again, similar demonstration as 2 though this usually happens at the 3rd section for me) I am current at my wit end here, my apologies the code looks a bit messy. And thanks for helping.

Oh I think I did went off-topic there. I was meant to find a solution with custom scrollbar while still allowing horizontal scrolling

A late response but indeed it was. Seem like I missed the point that ScrollTrigger make use of the native scrollbar to work. I was thinking of asking whether there is any scroll-hijacking solution but I believe not in this case (at least without it being a third party solution out of the scope of what GSAP provides). Cheers

Hi, I am a new user of GSAP + Scrolltrigger and am currently experimenting with making a horizontal scrolling function in ReactJS 18. Though it seems like scrolling doesn't even work here so I don't know which is wrong Here is my codesandbox which is my best attempt of making the minimal example of the current code https://codesandbox.io/p/sandbox/charming-framework-k3doew?file=%2Fsrc%2FApp.tsx I did some digging a bit, but I have mainly tested whether the useLayoutEffect() was rendered twice. It does appear that the "Second section" in the code indeed exists but scrolling did no change to the transform() function in '.wrapper' div. overflow-x: auto did reveal the scrollbar but it just seem the scrolling down doesn't move it. I suspect I might want to hook it to some scrolling event but based on some example I would think that GSAP would handle it already. There might be something missing (and simple) that I am not aware of with GSAP. Thanks for your time.