Can I use GSAP to create horizontal scrolling website?

[Elija]

I already tried different CSS approaches to create a horizontal website (FlexBox based, Grid CSS based, "transform: rotate" based) and every one of them looking like an odd hack and not like the proper way to do it.

I've spent too many weeks to build my website with each of this approaches, but every iteration I drowned in tons of technical problems because of that chosen way of implementing (like inability to use "position: fixed" and "position: sticky" on child elements, when his parent has been rotated).

My colleagues give me only one direction to find a better solution - "use JavaScript libraries like GSAP". I never use it before, so my question to this community - Can I use GSAP to create a horizontal scrolling website? If you have the examples of code or can give me some basic information about implementing a horizontal website with GSAP - I will be very grateful, because it's my pain for a whole last month. 

[PointC]

Hi @Elija 

 

Welcome to the forum.

 

Sure, you can use GSAP to animate a horizontally scrolling website. GSAP is an animation engine which means it doesn't render anything. Its core function is animating values. If there's a numeric value available to JavaScript, GSAP can animate it.

 

You can search the forum for horizontal scrolling and you'll find several topics and examples. Here's one to get you started.

GreenSock is also developing a new plugin similar to ScrollMagic. But much easier to use and with more features. That will hopefully be released in a few weeks. It works with horizontal scrolling too.

 

If you've never used GSAP, I highly recommend this guide:

 

Hopefully that gets you started. Happy tweening.