.thumb.jpg.45ad1f0654d8c8cd759c47599fe1796d.jpg)
Smooth Page Scroll
I've been getting a bunch of people asking me about how to do a smooth page scroll effect, so here it is.
Scrolling is just a transform. If you scroll 100px down, the browser will translate the page -100px up. We can do that with GSAP.
TweenLite.set(contentToScroll, {
y: -window.pageYOffset
});
So how do you prevent the browser from scrolling the content? Position your content in a fixed container, and set the height of the body equal to the height of your content. T
Well, here's the start of something. Put a data-depth attribute on your element like so. 0 will be no offset, 10 will be max offset.
<div data-depth="10"></div>
And then create a smooth scroll instance.
var scroller = new SmoothScroll({
target: document.querySelector("#scroll-container"), // element container to scroll
scrollEase: 0.1, // scroll speed
maxOffset: 500
});
With maxOffset set to 500, an element with a depth of 10 will move 500px.
10
