Making a horizontal website

Questions
,
1

Hi everyone,

I’m trying to create a horizontal scrolling portfolio website based on this DivHunt tutorial: https://www.youtube.com/watch?v=escpTDMqWcQ

My current problem is that the website’s width changes on different screen sizes, so I can’t use a fixed pixel value for the width.

Does DivHunt have a way to:

  1. Get the current total width of the website in the browser?
  2. Set this width as a variable in the GSAP plugin?

This is what I want, this section should stays in the middle

image
image1904×890 29.1 KB

but since the value is fixed, this section does not stay in the middle anymore

image
image1900×889 29.5 KB

Here’s my website for futher helps: hungnguyen.work

I want to do this so the horizontal scroll works correctly on all screen sizes (mostly desktop) .

Thanks!

2

Can you not use vw instead of a fixed size to solve this?

3

i checked the gsap plugin and there’s only px and % in the setting
image

4

In the video they’re using % in GSAP so that they can use vh/vw to set the size of the scrolling sections. It looks like you’re setting your sections to 1000px in width, so that will only really centre anything if your display is 1000 pixels. If you make each of your (it looks like 8) ‘cards’ or ‘sections’ 100vw (for example), then they’ll each take up an the entire width of a viewer’s screen, no matter if it’s a desktop, tablet or phone. Then you can use a % in GSAP to dictate how much left it should move (for example -700%).