ScrollTrigger horizontal scroll different Div width size

[AkhilRaja]

I created this basic horizontal scroll website and my problem is when my Section Width is more than 100vw its not working properly, i want all section should be visible and scrollable. Thank you.

See the Pen VwWZbEd by AkhilRaja (@AkhilRaja) on CodePen

[GreenSock]

9 hours ago, AkhilRaja said:

I created this basic horizontal scroll website and my problem is when my Section Width is more than 100vw its not working properly, i want all section should be visible and scrollable. Thank you.

I read your question several times and I'm not certain what you're asking, but I noticed that you're animating xPercent which is always relative to the element's native width. I suspect you were writing your code in a way that assumes all the Section elements are the same width, but obviously they're not, so for example an element that's twice as wide will move twice as far when you use xPercent: -100. 

 

I assume maybe this is what you were looking for?: 

See the Pen ZEyzaxv?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Just animate the regular "x" value the total width of all those elements added together in the negative direction. 

[AkhilRaja]

12 hours ago, AkhilRaja said:

I created this basic horizontal scroll website and my problem is when my Section Width is more than 100vw its not working properly, i want all section should be visible and scrollable. Thank you.

@GreenSock yes you understand my question correctly what i wanted to do here and its working now but only a small problem, when we reach at the end we see Green Color which is Body Background Color and it should not be visible, its looks like an extra 100vw and it should now be there, when we reach at end there should only be SectionD

[GreenSock]

Sure, just add window.innerWidth to the negative x value. 

x: () => -getTotalWidth() + window.innerWidth

See the Pen LYLPKYd?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Is that what you're looking for? 

[AkhilRaja]

Thanks for always helping me @GreenSock 😊