Jump to content
Search Community

In a smooth scrolling Body overflow:hidden

qqignatqq test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hello.

I'm trying to set up this post for myself: https://greensock.com/forums/topic/17300-smooth-page-scroll/ , but I can't do it

I've been trying to make sure that the smooth scrolling doesn't work in body but in div. I shouldn't have overflow on my body site. I understand that the problem is with these lines:
var html = document.documentElement;
var body = document.body;

I tried to write body = $('.mywindow'); but I have an error.

Can you tell me if this is possible at all?
Thank you

https://jsfiddle.net/cjenr2qg/

Link to comment
Share on other sites

I don't know how well smooth scrolling will work like that because because I never tried it without using the body, and I can't code something up for you at the moment. 

4 hours ago, qqignatqq said:

I tried to write body = $('.mywindow'); but I have an error.

 

That's probably because you're using jQuery, which wasn't used in my code sample. If you're not using the actual body, I would probably change the name of that var to something else to avoid confusion with the actual body.

body = document.querySelector('.mywindow');

The scrollY var might need to change too. Probably to something like this:

var scrollY = body.scrollTop || 0;

But I haven't tested that.

  • Like 3
Link to comment
Share on other sites

  • 2 weeks later...

Hey @qqignatqq,

 

Please note the easings

 

 // !!!  different eases for up / down scroll !!!
  if (scrollNum > lastScrollTop) {  
    TweenLite.to(action, 1, {progress:progress, ease: Power3.easeOut});
  } else {   
    TweenLite.to(action, 1, {progress:progress, ease: Power0.easeNone});
  }

 

Try another ease that fits more to what you expect.

 

Kind regards

Mikel

 

Link to comment
Share on other sites

3 hours ago, qqignatqq said:

I still don't understand how to work with it

If you'd like the eases to be the same scrolling both up and down, then just put something like TweenLite.to(action, 1, {progress:progress, ease: Power3.easeOut});

 

You can change the ease to whatever you'd like. Mikel was demonstrating that you can have a different ease for scrolling up and down if you'd like to. 

  • Like 1
Link to comment
Share on other sites

18 minutes ago, ZachSaucier said:

If you'd like the eases to be the same scrolling both up and down, then just put something like TweenLite.to(action, 1, {progress:progress, ease: Power3.easeOut});

Do not confuse speed with distance. They run different distances. If I prescribe this code you gave me, nothing will change.

Link to comment
Share on other sites

Hey @qqignatqq,

 

don't be confused ...

 

See the Pen MWgyOrg by mikeK (@mikeK) on CodePen

 

  // !!!  for up / down same ease !!!
  if (scrollNum > lastScrollTop) {  
    TweenLite.to(action, 1, {progress:progress, ease: Power3.easeOut});
  } else {   
    TweenLite.to(action, 1, {progress:progress, ease: Power3.easeOut});
  }

 

Thanks ZACH.

 

Happy tweening ... however you wish it ...

Mikel

 

 

Link to comment
Share on other sites

The distance per scroll is set by the easing in the timeline. 

 

So if you want a consistent scroll distance no matter where it is scrolling, remove the easing like so:

 

var action = new TimelineMax({paused:true})
.to('.wrapper',1,{y:-wrapperHeight, ease: Power0.easeNone});

The other tween is tweening to a particular progress, so you can change the ease based on up or down if you'd like, as mikel showed.

 

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

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