Jump to content


Disparities in width using smooth scroll

Recommended Posts

I'm currently working on a project I want to use smooth scroll for. To do so I decided to use @OSUblake's codepen. 


Since I want a horizontal scroll, I changed the direction from:

TweenLite.set(this.scroller.target, {
    y: -this.scroller.y


TweenLite.set(this.scroller.target, {
    x: -this.scroller.x


..and set the body's height according to the scroll-container's width, not height. - It kind of works, but it seems, that this.scroller.x (originally this.scroller.y) and the container's width don't match, since it "overscrolls". How so and is there a way to implement it correctly? 


I created a link to additionally visualize the issue:




See the Pen QWbvggK by magiix (@magiix) on CodePen

Link to comment
Share on other sites

Hey Tee.


You need to correct the height value of the page based on the width and viewport dimensions:

if (resized) {   
  var width = scroller.target.scrollWidth;
  body.style.height = (width + innerHeight - innerWidth) + "px";
  scroller.resizeRequest = 0;

See the Pen ExjmvYG?editors=0010 by GreenSock (@GreenSock) on CodePen


Happy tweening!

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