Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Red Bag

Each section width in Horizontal scroll

Recommended Posts

Hi, is it must fixed a size for each section in horizontal scroll? What I'm facing was when responsive the width of each section will be affect the content. Do any idea to do not fixed size for each section? I'm using UIKIT framework. As you can refer the reference below, uikit grid is not full width with the section.

 

image.png.19259f2f4bbea82dd8f33fa48852f715.png

See the Pen gOgXKdJ by redbad (@redbad) on CodePen

Link to post
Share on other sites

I read your question a few times and I still don’t really understand what you’re asking. Sorry - it is probably because I’m sleep-deprived. 

 

You don’t need to have fixed-width elements to have ScrollTrigger/GSAP work, no. They can be any width you want. 

 

If you still need help, please provide a minimal demo with a very specific GSAP question and we’d be happy to help. 

Link to post
Share on other sites

Hi,

Thank You for helping. For what I'm trying to say is when we try not to fix the width, the content is cut off half way in responsive devices. However, when we fix the width , the content looks odd , as there is lot of spacing display in big screen.

Is there any other solution that not to fix the width (so the content auto adjust based on different screen size).

 

Thank You

Link to post
Share on other sites

Hi,

As an example : https://www.manuport-logistics.com/en

we have checked and this website is not fixing a width for those section, however, the content still able to display nicely in frontend. But for our project, the content will distorted if we do so.

 

Besides, we come across another issue in Google Chrome , when we try to scroll horizontally from start to end by using mouse, the screen will be abit jumpy.

You may please refer to attached sample site : http://novafusion.asia/development/tm/test.html

This issue happen in Google Chrome and Safari only. Firefox seems fine.

Appreciate if you can advice on above issues.

 

Thank You

Link to post
Share on other sites

Unfortunately it's too complex to try to troubleshoot a live web site that loads many other libraries and has other complexities going on that could be unrelated to GSAP. If you'd like some help, please provide the most minimal demo possible (like in CodePen) and explain your GSAP-specific question and we'd be happy to help. I'm still not really sure what you're asking here, sorry. 

Link to post
Share on other sites

Thanks for your reply. I did do a demo in codepen, but it can't view the problem what i ask. Perhaps you can refer this (https://cdpn.io/redbad/debug/gOgXKdJ/yokZEpDeVzmA) to view the problem when scroll horizontally from start to end, the website not fit to the browser. The problem was just happen in Google Chrome and Safari. As you still not understand, here's the reference, when scroll till the end, it's seem still can scroll over to see the white space.

 

image.thumb.png.4f3e1352e652bf03848434c7a10bd74d.png

 

See the Pen gOgXKdJ by redbad (@redbad) on CodePen

Link to post
Share on other sites
1 hour ago, Red Bag said:

I did do a demo in codepen, but it can't view the problem what i ask.

Are you saying that you can't provide a CodePen that shows the issue? 

 

1 hour ago, Red Bag said:

when scroll horizontally from start to end, the website not fit to the browser.

Are you saying that you want each colored section to fill the entire width of the browser? If so, that's a CSS issue, unrelated to GSAP. It looks like you've got width: 50% and you don't have box-sizing: border-box, so your padding is eating up space too. 

 

If you're just saying there's extra space at the bottom, that's most likely a CSS issue on your end as well. If you can provide a CodePen that shows the issue, I'd be happy to take a peek. 

Link to post
Share on other sites
3 hours ago, GreenSock said:

Are you saying that you can't provide a CodePen that shows the issue? 

Yes, the codepen not show the issue?  or you can refer this link http://novafusion.asia/development/tm/test.html
 

Here is my codepen demo same with the above link.

See the Pen gOgXKdJ by redbad (@redbad) on CodePen

 

 

3 hours ago, GreenSock said:

If you're just saying there's extra space at the bottom, that's most likely a CSS issue on your end as well. If you can provide a CodePen that shows the issue, I'd be happy to take a peek. 

If CSS issue, i can't set the overflow: hidden for whole container because it will affect the horizontal scrolling.

 

 

Link to post
Share on other sites

We're happy to help with any GSAP-specific questions here, but these forums are not for general consulting or CSS structuring help. If you think there's a GSAP/ScrollTrigger issue, please provide a clear demo in CodePen; as I said earlier, it's too time-consuming and error-prone to try to troubleshoot a live web site that has a bunch of other libraries, external CSS, etc. which could be interfering. 

 

It looks like you've got 80px of padding on the left side of that container, just so you know. I assume that may be what you're referencing. 

 

Good luck with the project. 

Link to post
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.

×