AkhilRaja Posted August 21, 2021 Share Posted August 21, 2021 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 Link to comment Share on other sites More sharing options...
GreenSock Posted August 22, 2021 Share Posted August 22, 2021 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. 1 Link to comment Share on other sites More sharing options...
AkhilRaja Posted August 22, 2021 Author Share Posted August 22, 2021 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 Link to comment Share on other sites More sharing options...
Solution GreenSock Posted August 23, 2021 Solution Share Posted August 23, 2021 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? 1 Link to comment Share on other sites More sharing options...
AkhilRaja Posted August 23, 2021 Author Share Posted August 23, 2021 Thanks for always helping me @GreenSock 😊 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now