Banbeucmas
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by 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
QuoteYou 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)
-
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. -
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
-
5 minutes ago, GreenSock said:
Yeah, I think you're right about that. It's the nature of the beast (hot reloading). And obviously that's only an issue that'll show in your dev environment, not a live site. Doing a normal refresh should resolve it I'd guess.
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
-
2 minutes ago, GreenSock said:
A few questions...
- Are you using GSAP 3.11.5? If not, please update and confirm that the issue persists.
- If you don't rely on hot reloading in your dev environment, does everything work fine? Again, I kinda suspect the problem is actually your dev environment with hot reloading.
- Is the only remaining issue that things aren't moving horizontally quite enough? Is the distance that's "hiding" exactly the width of the scrollbar?
It's super difficult to troubleshoot blind. Here's a Stackblitz starter template that you can fork.
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
-
53 minutes ago, GreenSock said:
I don't see any #page element (no elements with that ID). What am I missing? And the relevant content appears to be 100vh, so I must be missing something. Obviously if you're pinning something, it adds pinSpacing to prevent things from collapsing/overlapping and to stretch out the scrollable area, but you're welcome to set pinSpacing: false if you prefer that effect.
I read that a few times and I'm still pretty lost. "between resizing" - like between the time you start resizing and stop resizing? And why do you expect it to "got to the last end of the last section" (and could you explain what that means)?
It looks like you're setting the maxWidth variable from within an onRefresh...which runs AFTER all the refreshing is done, but you're plugging that value into the animation's function-based "x". So that value will always be stale. In other words, you've got an order of execution problem there (if I understand your goal correctly). I assume you intended to do something like:
// old x: () => `-${maxWidth}` // new x: () => getMaxWidth(sections) * -1
What's "xOffset"? I don't see any such value. And what's "hot-swap"? If you're talking about hot module replacement, that's probably a bad idea to rely on that doesn't mimic browser behavior and it's not a "real" way to run things. It's totally unrelated to GSAP/ScrollTrigger - it's a build system thing.
My apologies, typing at 3AM seems to mess this post up a lot. I will try to clarify
QuoteI don't see any #page element (no elements with that ID). What am I missing? And the relevant content appears to be 100vh, so I must be missing something. Obviously if you're pinning something, it adds pinSpacing to prevent things from collapsing/overlapping and to stretch out the scrollable area, but you're welcome to set pinSpacing: false if you prefer that effect.
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
QuoteI read that a few times and I'm still pretty lost. "between resizing" - like between the time you start resizing and stop resizing? And why do you expect it to "got to the last end of the last section" (and could you explain what that means)?
It looks like you're setting the maxWidth variable from within an onRefresh...which runs AFTER all the refreshing is done, but you're plugging that value into the animation's function-based "x". So that value will always be stale. In other words, you've got an order of execution problem there (if I understand your goal correctly). I assume you intended to do something like:
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)
See the Pen YzygYvM by GreenSock (@GreenSock) on CodePen
QuoteWhat's "xOffset"? I don't see any such value. And what's "hot-swap"? If you're talking about hot module replacement, that's probably a bad idea to rely on that doesn't mimic browser behavior and it's not a "real" way to run things. It's totally unrelated to GSAP/ScrollTrigger - it's a build system thing.
Let me reword what I said.
Quote3. 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 translateX() value when the scrollbar reached the end tends to be inaccurate on first load, but once React initiates a rerenders due to code change, the intended behavior was achieved.
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.
-
5 hours ago, GreenSock said:
I'm not entirely sure what you're looking for there or how scroll-hijacking would solve this, but if you're looking for scroll smoothing, we do have ScrollSmoother which does a hybrid form of scroll hijacking.
Oh I think I did went off-topic there. I was meant to find a solution with custom scrollbar while still allowing horizontal scrolling
-
On 3/13/2023 at 5:52 PM, GreenSock said:
Welcome to GSAP, @Banbeucmas
It's almost 4am here, so my brain is mostly asleep and I don't have time to finish everything for you, but I assume you were looking for something more like this:
https://codesandbox.io/p/sandbox/upbeat-https-u37rrs?file=%2Fsrc%2FApp.tsx
It's mostly CSS issues. You had overflow: hidden on the body so you'd never see a scrollbar. You set up the container so that it's as wide as its contents instead of being only as wide as the viewport which threw off your calculation here:
x: -(container.scrollWidth - container.clientWidth) // 0!
That evaluated to 0, so you weren't moving x at all
Right now, it's not animating all the way to the left only because the ScrollTrigger cannot reach its end position since you've got the page set up with your CSS initially to have a gap at the bottom. So imagine the window is 800px tall but your content inside that page is only 500px, so of course the page is not scrollable...but let's say we want to pin it for 1000px, so ScrollTrigger adds 1000px of padding to that element but since there was a 300px gap, your page will only be ABLE to scroll 700px! Again, that's all CSS-related stuff. But hopefully this gets you going in the right direction.
Happy tweening/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.
GSAP + Scrolltrigger horizontal scrolling with all section on the same z-index
in GSAP
Posted
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.