Horizontal scroll page with diff width content & animation

[FrankRuiz]

Hello,

 

Here are some requirements for the page I need to build:

- Must scroll horizontally, so using mouse wheel and arrows would scroll the page horizontally.

- Content sections would have different widths based on the content in each section (so not 100vw as I have seen from the ScrollTrigger examples, also have noticed that the width of the container is set to the total width of the content sections. So 6 sections would equate to 600% width set via the css).

- Each section will have different parallax/animations upon entering the viewport.

- There will be a navigation with scroll to anchor links.

- This will be desktop only use case, so I do not have to consider mobile views.

I have looked into ScrollTrigger and ScrollMagic and as noted above have seen that the widths of the content are 100vw. So is there a way to have differing content widths if I go this route?

I also came across this repo: https://github.com/oberonamsterdam/horizontal

 

So with this background being defined, my question to anyone with any experience building a page/site with horizontal scroll is what method has worked well for you? I am planning on using Gatsby.js and gsap regardless but am more so asking if ScrollTrigger horizontal is viable solution or is there something else better to us for this part?

Thank you in advance for your feedback, Frank.

 

[ZachSaucier]

Hey Frank and welcome to the GreenSock forums. 

 

Yes, the same concept works regardless of whether or not each section has a width of the viewport. The key is just translating the container by its full width minus the width of the viewport (with a linear/no ease) and making the ScrollTrigger's duration the same distance (so it's consistent with how a user normally scrolls). 

 

Here's a thread focused on the same subject that has a demo that you might find helpful: