Jump to content
GreenSock

growmybusiness

Horizontal Scroll (ScrollTrigger) & ScrollSmoother causing page to move diagonally, not horizontally

By growmybusiness, in GSAP. Views: 739

Moderator Tag
Go to solution Solved by GreenSock,

Recommended Posts

Posted

Hi there!

 

So I've setup a purely horizontal scroll site with ScrollTrigger, however now I've added in ScrollSmoother there is no ability to scroll! I did have an issue where it was scrolling diagonally, however I realised I had the wrapper and content selectors the wrong way around.

 

Has anybody else had this issue?

 

The attached codepen is a representation of the site, on the dev site I'm using it with Wordpress & the Divi theme, so if you're wondering why the odd selectors, that's why!

 

Thanks in advance,

Ben Elwood

See the Pen zYWvdvj by benjaminelwoods (@benjaminelwoods) on CodePen

Link to comment
Share on other sites
  • Solution
  • Solution
Posted

Welcome to the forums, @growmybusiness. Thanks for being a Club GreenSock member! 💚

 

I noticed several problems:

  1. You set overflow: hidden and max-height: 100vh on the <body>, thus you're making it impossible for a scrollbar to show.
  2. ScrollSmoother works on the whole page, but it looks like you were trying to apply it to a certain <div> which won't work. 
  3. This results in end being "+=NaN": 
    end: () => "+=" + container.offsetWidth - container.innerWidth

    Because container.innerWidth is not a thing :) 

  4. You didn't set you wrapper or content to valid elements. It should be at the root level. 

Were you looking for something more like this?: 

See the Pen mdxeqzo?editors=1010 by GreenSock (@GreenSock) on CodePen

  • Like 1
  • Thanks 1
Link to comment
Share on other sites
  • Author
Posted

Ah! Of course, got lost in all of my attempts to fix other issues! Thank you so much.

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
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
Login Create Account