ScrollTrigger Dynamic calculations help

[xxeg]

I have a gallery of "projects" that I want to scroll horizontally. However, a (common) isssue I am running into is that when I resize the window, the scroll does not go all the way, such that the right side of items gets clipped out of the window. I tried employing common methods of fixing this via calculations through functions for xPercent and end() however this did not work.

 

I am not sure if this is attributed to the way my project divs are styled but I was wondering what are some common ways to ensure the items will scroll all the way regardless of window size? Ideally, I want to the gallery to start with the first item in the center, and end with the final item in the center. Similarly to this website https://aristidebenoist.com/

 

I am not sure what direction I should go in fixing this problem either. Usually, I can break up these problems into subproblems to simplify it down. However, I am not sure if I should go about fixing the window problem or centering the project divs first. Any help would be much appreciated

See the Pen VwqJPPK by agl13 (@agl13) on CodePen

[Trapti]

Hi, 

 

Here is the updated version of your pen. Hope it helps. I removed a bunch of unnecessary CSS. 

See the Pen XWoLRNE by tripti1410 (@tripti1410) on CodePen

 

[xxeg]

I see. Thank you for the response! I see how you used display grid instead of what I did with flex. However, I am still unable to ensure the last item still does not end in the center. I am still not sure what to do about since the position of that item varies depending on window size.

[Trapti]

Hi, 

 

I updated the pen. It should work for window resize as well. 

 

I was not taking about grid or flex. There was bunch of position values which I removed. Anyways it was just cleanup. 

 

 

[xxeg]

Thank so much! Your solution is perfect!