Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
AkhilRaja

ScrollTrigger horizontal scroll different Div width size

Go to solution Solved by GreenSock,

Recommended Posts

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

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. 

  • Like 1
Link to comment
Share on other sites

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

  • Solution

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? 

  • Thanks 1
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×