Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Tee

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
});

to:

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:

https://vibeitin.firebaseapp.com/

 

 

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

Link to post
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 post
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.

×