Jump to content
Search Community

I want to scroll the content horizontally instead of vertically

Mustafa Şatıroğlu test
Moderator Tag

Recommended Posts

Hello everyone. I'm trying to make improvements on GSAP. I have an example of a timeline. Liked it very much. In the example I saw on the Codepen site, the content, that is, each section area, scrolls vertically. I want to scroll it horizontally with the mouse. I am posting the link example.

In short, in the example above, what kind of changes do I need to make in the js code in order to scroll each section field horizontally, not vertically?

See the Pen 597a468071d4dce3f7bf0ce80d6cb8d3 by michellebarker (@michellebarker) on CodePen

  • Like 1
Link to comment
Share on other sites

Hi there,

 

This won't be a case of 'making adjustments'. You'll need to set both the styling and the JS up completely differently.

 

You can use containerAnimation to move elements horizontally while scrolling vertically

 

Or you can use scrollTrigger's horizontal option

 

horizontal Boolean - By default, it assumes your setup uses vertical scrolling but simply set horizontal: true if your setup uses horizontal scrolling instead.


Personally if you're new to GSAP I'd suggest giving the getting started guide a go before jumping in here.

 

 

Good luck and pop back if you have any GSAP specific questions as you're learning.

Link to comment
Share on other sites

 thanks @Cassie

 

yes i am just learning. I solved this problem. I would have another question. In the example (

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

) in the codepen link I sent below, I want to add prev and next buttons to each section field. And when I click these buttons, I want it to jump to the next or previous section field. Can you help with this?

Link to comment
Share on other sites

We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or "here are my requirements: ___ now please make my demo meet those requirements" tutorials. Of course anyone else is welcome to post an answer if they'd like - we just want to manage expectations.  

 

You could probably use code that grabs the ScrollTrigger for each section and tap into its "start" or "end" properties to figure out the exact scroll position where it starts, and then use a scrollTo: tween to animate there on click. 

 

You can post in the "Jobs & Freelance" forum for paid consulting, or contact us directly. 

 

Otherwise, if you've got a GSAP-specific question just post that here along with a minimal demo and we'd be happy to take a look. 

  • Thanks 1
Link to comment
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.
×
×
  • Create New...