LVegetable

Hello~ okok, ill look into it then, thanks~ Yeah, the one in the demo is random, I just added a ton of math functions to simulate a computationally heavy component so that the glitch effect is more noticeable.

Hello, Thanks again for the quick response @Rodrigo~ The problem is I have a component that renders a canvas on top of everything and that this causes the pinning to look glitchy when scrolling into the sections fast enough. The component itself could be invisible and it still causes the problem. I attached a video and added the component to the StackBlitz you sent me. It is somewhat hard to see but the pinning is glitchy at the bottom when entering the pin, after entering its fine, and in reverse it would make a glitchy look on top). Kind Regards, L https://stackblitz.com/edit/stackblitz-starters-3lbk7s?file=app%2Fcomponents%2FExpensiveEffect.tsx 5697d7d947009c33b06945da6eee10a9_736151998994_v_1714459199009725.mp4

Hello, thank you so much for the quick responses @Rodrigo and @mvaneijgen, and apologies for the delayed reply, I worked on it today morning after reading the first one but got caught up with stuff after. I took a step back and looked over the code again today and noticed that I had quite some nesting with HTML tags all loaded with Tailwind stylings I forgot about that were messing me up so I ended up 'cleaning the project up' as best as I could and moved back to using the window scroll instead of a reference. I did check the docs for using a reference to scroll, it just didn't work at the time but likely due to all the nesting I had. Probably would have been able to figure it out the way it was, but I think the new approach is a little cleaner and for now, I think, I got the ScrollTrigger to work, the pinning at least.... kind of (?) Kind of.... I have run into a new problem now.... Sry cause its somewhat unrelated the question/title of this thread, but... I am now encountering a new problem with ScrollTrigger. My design includes an animated canvas layer that updates continuously, and it appears to cause a clipping effect with ScrollTrigger and Pin (When you scroll into the section fast). I initially thought this was due to the visual effects, but it seems more related to the computational load, possibly interfering with GSAP... I noticed this when I was trying to optimize the effect using a GLSL shader instead of just pure JS which sort of helped but not really, and adding things like throttling etc where if I delayed the animations to only update every 50ms it would happen and otherwise it would all be fine... (Also I tried anticipate scroll and It didnt seem to help). I attached a 'proper' demo using the StackBlitz templates this time with a similar environment!~ Not exactly the same because I wasn't going to throw in the whole shader and all that but the result is the same. Im not sure if theres a solution to this but I thought it would be worth mentioning anyhow, perhaps I just need to further optimize the component or think of a new design..... Also the current pin and scroll trigger is quite terrible, kind of embarrassing to share with the GSAP team hahaha, I'll see if I can add the horizontal scrolling and all tomorrow... Anyways, thanks again for the quick help~ I wasn't expecting a reply so soon haha. (SomeComponent has the ScrollTrigger, SomeEffect is the computationally heavy effect (sry for naming I put it together real quick without thinking much 💀)) https://stackblitz.com/edit/stackblitz-starters-xmk1gs?file=app%2Fcomponents%2FSomeComponent.tsx

I have started learning GSAP recently and have been loving it. However, I have been experimenting with ScrollTrigger now and likely due to my own design choices it is not quite working. To whomever takes the time to help me with this, thank you so much in advance 🙏 And apologies for the broken CodePen, I added it anyways in case it helped understanding the description of the problem better, but it was really hard to recreate a Next Typescript React Tailwind project within a codepen.... I am new to web dev so I don't exactly have that 'mindset' yet so also apologies for the spaghetti code and appraoches hhaha. My project uses React with Next. The problem i'm having is likely due to the fact that I use a scroll ref for scroll context instead of the window scroll. I'm doing this because the website consists of 3 layers. 1. The main background, this (ideally) would change colors with ScrollTrigger. I have not yet done this as I have encountered the problem with ScrollTrigger in a different component, but my idea was to attach a ScrollTrigger to each section and based on enter and leave change the color. 2. The content background, this just sits on top and is a padded div that has a different constant background color. The key thing is that this is where all of the content (layer 3) lies, and so I need to have overflow-y-auto here, such that when you scroll you scroll the content/children within this div. Because of this for any ScrollTrigger animation I need a ref to this div, that I have within context so that I can provide it to the children below. Now the problem is related to the pinning of a section in layer 3 to create a horizontal scroll effect with some other animations I have in mind. The first problem with pinning here is that I get a wobbly effect when I try to scroll the section. I found a similar question on the forums at However, it seemed to be quite related to PIXI which I do not use. Theres also the first solution provided that sets pinTyped to fixed but I do need to enable clicking and mouse interaction within this section so I cannot simply disable pointer events. The second problem is that while I am in this section, I am still scrolling the section and so even if it did work I would end up at the bottom of the page upon exit. I have tried quite a few things so far but to no avail :(... What I currently have is: Upon entering, use a scrolltrigger to pin and set a state of isPinned. This isPinned. When scrolling in this area, the actual event will .preventDefault() and instead add to the h(orizontal)ScrollContainer.scrollLeft, to some extent adding this middleman that will fake scrolling. This also checks if we have reached the maxScrollLeft which is some value that once we have scrolled past we will use to setIsPinned to false, and kill/disable the trigger. The reason I had to do this is because otherwise I will never reach the end since all I will be doing is adding to scrollLeft, the actual mouse scroll event is still disabled. Now we exit this pin but this still has problems. Firstly since we kill or disable it, it will reset which looks bad going back up. Furthermore, you cant reactivate it backwards. Additionally, it is still wobbly if I scroll into this section very fast before the actual pin takes effect. I'm not sure if killing it is the best thing but the entire code I have right now is starting to like my shoelaces back in kindergarten. This solution is the best I can think of right now, perhaps to introduce reverse scrolling I would use isScrollingDown and then use a seperate reverse ScrollTrigger but...... Yeah Im struggling hahah and I dont really like spaghettiness of the code right now.... It is making me rethink the design of the website but it would suck to not have ScrollTrigger cause - its cool - and cool is good hahah. Perhaps the best solution is to figure out a way to build the project with global scroll. The main problem with this is that when I tried, for some reason none of the components I wrote would render as body would go above and Z indexes didn't do anything, probably something related to how Next works that I dont understand.... Anyhow, again, thank you so much to whomever takes the time to help figure this out, I tried to describe the situation as best as I could but it is quite messy and at some point I begin to yap.... 💀 hh, anyways, if anything requires further clarification then I would be happy to help and provide that!~