Horizontal scroll, parallax & responsive using ScrollTrigger & React

[BigHoot]

Hi guys,

first of all I'd like to mention I'm actually trying to do things way above my league and I have a lot of things to learn.

I'm trying to create a reponsive horizontal website using react & gsap. I've tried many things before such as react-scroll-horizontal but I've felt like it'd be easier using GSAP considering I'd like to animate things in the future.

 

I ended up finding this link in another post : https://codesandbox.io/s/lively-sunset-9ifwq?file=/src/index.js:0-228

So I'm running it right now but it isn't reponsive at all. It creates a huge white space at the bottom. Also I'd like to change from horizontal to vertical depending on screen size. If you guys got some hint, I'm all in.

Also how'd you add background parallax into the sections ?

Thanks in advance !

[OSUblake]

Welcome the forums @BigHoot

 

I'm not seeing any issues with the sandbox you provided. Am I missing something?

 

6 hours ago, BigHoot said:

Also how'd you add background parallax into the sections ?

 

Depends on what you are trying to do. If the parallax is supposed to be on a per slide basis, a containerAnimation might be what you are looking for. Check out this thread...

 

 

Also, have you check out our React Guides? If not, I recommend going through them.

 

https://greensock.com/react

 

[BigHoot]

Hi ! Thanks a lot for your answer !

 

So yeah, you're missing something the same way I did. If you open the preview in a new window and then activate the responsive menu via F12, you'll quickly notice the problem. It creates a huge white space under everything when on mobile phone 😕

As for the parallax. I'm looking for a way to layer the sections to be precise. I've found this : 

See the Pen KKpLdWW by GreenSock (@GreenSock) on CodePen

But unfortunately, I wasn't able to integrate it myself in my horizontal website

[OSUblake]

1 hour ago, BigHoot said:

So yeah, you're missing something the same way I did. If you open the preview in a new window and then activate the responsive menu via F12, you'll quickly notice the problem. It creates a huge white space under everything when on mobile phone 😕

 

That's just a CSS issue. The container has a width of 600%, so it's allowing horizontal scrolling. You just need to wrap it with something that has a width of 100% and overflow hidden.

 

https://codesandbox.io/s/boring-ully-nm5zf?file=/src/styles.css

 

1 hour ago, BigHoot said:

But unfortunately, I wasn't able to integrate it myself in my horizontal website

 

I think it's easier to reason about a lot of ScrollTrigger animations if you remove ScrollTrigger from the equation and try to solve like you would a normal animation. So a horizontal version of that should be pretty straightforward. Just move all the panels except for the first one offscreen, and then animate them in.  

 

A scaled down version. Then you would just need to set overflow to hidden on the container.

 

See the Pen gOGGwNj by GreenSock (@GreenSock) on CodePen

 

 

 

[BigHoot]

Thanks a lot for your help bro, I'll try tomorrow and I'll let you know !