Jump to content
GreenSock

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

smooth page scroll

Recommended Posts

Hi,
Is there any way to archive a smooth page scroll with GSAP 3 or maybe a plugin?

Thanks

Share this post


Link to post
Share on other sites
Posted (edited)

Thank you.
That was really fast.

 

Actually I don't get it.
With “smooth scrolling” I don’t mean smoothly scrolling to an element, but rather a smoothly animated kind of scrolling behavior in the page when the user scroll.
 

Edited by Houwer
  • Like 1

Share this post


Link to post
Share on other sites
3 hours ago, Houwer said:

With “smooth scrolling” I don’t mean smoothly scrolling to an element, but rather a smoothly animated kind of scrolling behavior in the page when the user scroll.

That's what the demos in the documentation page that Jacked linked to are doing. Can you please try to explain what's not like what you're wanting?

  • Like 3

Share this post


Link to post
Share on other sites

So sorry.
I had a typo on my code.
It's working perfectly.

Thank for your help.

  • Like 1

Share this post


Link to post
Share on other sites

hi? i just wanted to ask regarding this issue. mine is saying "Scrollbar is not defined" in this line:
const bodyScrollBar = Scrollbar.init(document.body

 

how can i fix this? thank you..

Share this post


Link to post
Share on other sites
7 minutes ago, nonsense27 said:

mine is saying "Scrollbar is not defined" in this line:
const bodyScrollBar = Scrollbar.init(document.body

Hey nonsense27 and welcome to the GreenSock forums. It sounds like you're not properly loading the smooth scrolling library. Do that and the error should go away.

  • Like 1

Share this post


Link to post
Share on other sites

sorry but is "smooth scrolling library" different from ScrollTrigger? because i only imported these scripts:

<script src="./node_modules/gsap/dist/gsap.min.js"></script>

<script src="./node_modules/gsap/dist/ScrollTrigger.min.js"></script>

 

am i doing it right?

Share this post


Link to post
Share on other sites
3 minutes ago, nonsense27 said:

is "smooth scrolling library" different from ScrollTrigger? because i only imported these scripts:

<script src="./node_modules/gsap/dist/gsap.min.js"></script>

<script src="./node_modules/gsap/dist/ScrollTrigger.min.js"></script>

Yes, it is different from ScrollTrigger. Going off your code, it looks like you're basing things on this demo? Which means you need to also load smooth-scrollbar. You could use the CDN link in that demo if you'd like: https://unpkg.com/smooth-scrollbar@latest/dist/smooth-scrollbar.js Make sure to load it before your custom JS.

 

ScrollTrigger works with various smooth scrolling libraries, as the demos in the docs show.

  • Thanks 1

Share this post


Link to post
Share on other sites

thank you very much! it seems that the scrolltrigger script i imported in the node_modules doesn't work properly. I tried using scrolltrigger cdn, and now it's working. Thank you for helping me.

Share this post


Link to post
Share on other sites
3 minutes ago, nonsense27 said:

it seems that the scrolltrigger script i imported in the node_modules doesn't work properly. I tried using scrolltrigger cdn, and now it's working.

Hm, did you get errors or something? I wonder if you just forgot to gsap.registerPlugin(ScrollTrigger). You should absolutely be able to use ScrollTrigger in an NPM environment. 

  • Like 1

Share this post


Link to post
Share on other sites

it's error is

Uncaught TypeError: ScrollTrigger.scrollerProxy is not a function

 

where should i put the gsap.register()?
i put it on my main.js, at the very first line.. am i doing it wrong?

Share this post


Link to post
Share on other sites
3 minutes ago, nonsense27 said:

Uncaught TypeError: ScrollTrigger.scrollerProxy is not a function

 

That means you're not using 3.4.0 or later. Please update. scrollerProxy() is a brand new addition. 

 

4 minutes ago, nonsense27 said:

where should i put the gsap.register()?
i put it on my main.js, at the very first line.. am i doing it wrong?

As long as you run it when the window/documentElement/body are defined, you're fine. Obviously it should be before you create your tweens/ScrollTriggers. There's not a specific place you're required to do it, though. 

  • Like 1

Share this post


Link to post
Share on other sites

it's okay now. my gsap version was only 3.3.4. i updated it, and now it's working fine. thank you very much! i really like gsap. thank you

  • Like 1

Share this post


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.

×