Jump to content
Search Community

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

grow. test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

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

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

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