seifhadaba

No problem. Thanks for all the help.

Sorry for the late reply. Thanks for the suggestion. Just to be sure, do you mean use padding instead of margins to make the slide fill the whole width of the page, as opposed to having it be less than the full width with margin filling up the rest? I tried opening this to see what you mean but it says the sandbox isn't found. Are you able to please send another link?

I've recorded a video demonstrating the issue here. 1. I open the sandbox then go into full view in a new tab. 2. The animation works correctly initially, with the horizontally scrolling containers being of the right width. 3. I resize the window, the components resize correctly, but the ScrollTrigger no longer snaps at the correct locations, and scrolls beyond the end of the components, as if the width variable hasn't updated. 4. If i maximise the window again, the animation works correctly I should also note if I refresh the page in the smaller window, the ScrollTrigger width updates correctly. This issue occurs on Safari, Chrome, and Firefox on different computers, and also when locally hosting the website. As you noted before, the getWidth() function is run when the window is resized, but the animation doesn't seem to be updating correctly.

Thanks for sharing, it seems like what I'm looking for. From reading the text in the demo, it seems to suggest snapping to the individual sections in the container animation isn't possible? This is important for me so just wanted to confirm please. Thanks for the suggestion to set the initial properties in css then animate the final properties - that makes sense. Can I please ask again about the issue I'm having with the animation not working when the window is resized? I've provided a screenshot in my last response.

Thanks for the suggestions. I've added this argument as you suggested but now it stays at an opacity of 0.1 instead? It stays there even after the animation has snapped to the component. I see now it runs but the locations of the components, as well as where the scrollTrigger snaps to, are incorrect and are translated an excessive an amount as if the width variable hasn't been updated in the animation. Also wanted to follow up please on this point from my previous message. I've attached a screenshot showing how section2 is halfway off screen and section 3 is visible on the right to illustrate what I mean. This is in a snap position.

Hi @Rodrigo and thanks for the reply! I've fixed some of the things you noted in the sandbox code which hopefully should be updated now if reopen it. Thanks for pointing that out. Commenting this out does seem to mostly fix the issue : ) You're right, I did intend to just have both set to hidden, but forgot to set it back to that after changing it for some other purpose. The scroll snap in my CSS because the website generally consists of vertically stacked full page sections, so I wanted the scroll to snap to those vertical sections (you can get a better idea of what I'm saying if you visit the WIP website with placeholder text). I thought the scrollTrigger snap only applied to the animation and so wouldn't affect the page scrolling outside of this component, but I might be wrong. Is it bad to have both the CSS scroll snap and the scrollTrigger snapping? The animation seems to work with both included. Thanks again. I fixed that but now noticed it applied the class to the container, and not the elements within the container (the elements being animated). Is there a way for me to set as targets the elements within, not the container? I was hoping the active class would be applied only to the element currently snapped to, but I'm not sure if that's possible. I see now it runs but the locations of the components, as well as where the scrollTrigger snaps to, are incorrect and are translated an excessive an amount as if the width variable hasn't been updated in the animation. Another issue I noticed but forgot to mention is the 'section2' element in ExperiencePage.tsx has its opacity increase then decrease correctly in the forward direction of the animation, but when scrolling back, the opacity stays fixed at 1.0. This issue isn't present in the section1 and section3 components. Would you happen to know why please?

code sandbox I'm new to GSAP and am struggling getting a certain animation to work using scrollTrigger when my elements are in a grid layout. The animation aims to move the content horizontally as the user scrolls, and I've taken out the relevant components into this code sandbox. Apologies if there's still too much code in there, but I wanted to make sure the code is representative of the components I have in my project, in case there are nuances causing the problem. In App.tsx, if you uncomment all the code, you'll find a grid layout containing a 'navbar' on the left, and the main content on the right. Currently, with the grid commented out, the animation works fine, but if you include the grid, it all breaks for reasons I don't understand. I've read through the common mistakes for GSAP and scrollTrigger and don't think this is covered. I also have a couple of other smaller issues as well please in the ExperiencePage.tsx component: toggleClass on scrollTrigger doesn't apply the .active class to components. the width variable isn't being updated as the browser window is resized, despite me setting invalidateOnRefresh to true and using a function to define the end attribute in the scrollTrigger configuration. Appreciate any help with this please.