Jump to content
GreenSock

CreateSean

Horizontal Scroll - keyboard nav is wrong

Recommended Posts

I've got a site I'm building where the entire page is horizontal scrolling and that is working correctly.

 

However my client has asked that it be possible to click/drag to left/right  and that keyboard navigation use the left/right arrow keys and not the up/down as it does now. Is this possible?

 

See the Pen GRMBPoQ by createsean (@createsean) on CodePen

Link to comment
Share on other sites

There are plenty of Draggable examples if you search around the forum, like this one.

 

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

 

For keyboard, you need to add event listeners to the corresponding keys and then change scroll position. 

 

Link to comment
Share on other sites

@OSUblake thank you for that. I've used that but am still not getting draggable working. Here's what I've got so far.

 

Any further advice or pointers greatly appreciated

 

Sean

 

See the Pen KKXGjOo by createsean (@createsean) on CodePen

Link to comment
Share on other sites

You need to adapt the code to work with your ScrollTrigger.

 

You can get the ScrollTrigger for a tween or timeline like so.

 

let animation = gsap.to(".foo", {
  scrollTrigger: {
    ...
  }
});
  
let myScrollTrigger = animation.scrollTrigger;

 

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

 

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.
×