MarkGATX

I started commenting out and testing and it still didn't work. Then I remembered one thing you suggested. That was never my intention and I did notice the scrollbar under the header. I put it on the list of something to clean up later. I should have fixed it sooner. I had an overflow-x:hidden rule set up when i was messing with some earlier layouts for mobile. I didn't need it now so I removed the rule and suddenly the animations work. So now I'm curious as to why the overflow-x:hidden would break the animations only on the manual scrollbar?

I hope someone can help me here. I'm stuck and confused, especially after I started a StackBlitz to recreate the problem and it seems to be working there. Here's the code... https://stackblitz.com/edit/stackblitz-starters-2owhjq?file=app%2Flayout.tsx For some reason when I manually use the scrollbar to scroll through the page, none of the animations work. It doesn't matter how fast or slow I manually drag the bar, the animation doesn't work. Mousewheel works fine, but scrollbar doesn't. The most frustrating part is that it seems to be working on the version in stackblitz. I'm trying to think of the differences in them... - I'm not using Tailwind. Can't see how that should matter. - I've replaced all the images with divs in stackblitz. Again can't see how that could have an effect. - I've added background-colors to stackblitz for ease of seeing things. Shouldn't matter. I'm sure I've done something wrong but I can't find it. I've checked the forum. I've checked the common scrolltrigger errors post. I've checked copilot. If anyone has any idea what's going on I would really appreciate some guidance. I took a quit screengrab so you can see what I'm seeing. Sequence 01.webm

Hey everyone. I'm new to React and Greensock and I just can't seem to figure out a simple transition. I've checked the forums and spent hours on Google but nothing seems to work. I'm hoping someone here can help out. I've got a React site that changes the main element with navbar clicks firing the handlePageChange function and passing in the new page. I just want a smoother transition between the current page and the new page but I can't seem to get anything to work. I was hopeful when I found out I need to take React out of strict mode that it would solve some problems, but no luck. I'm sure there's a very simple solution that I'm just missing in my inexperience. I recognize the gsap animation I've included won't work since I haven't defined what oldPage is in my script. I've tried so many permutations I wasn't sure what to put in the small demo. Maybe that's the ultimate question: how do I define the element to be animated when it's an entire React component? Maybe?