Houwer Posted July 8, 2020 Share Posted July 8, 2020 Hi, Is there any way to archive a smooth page scroll with GSAP 3 or maybe a plugin? Thanks Link to comment Share on other sites More sharing options...
GreenSock Posted July 8, 2020 Share Posted July 8, 2020 Check this out - just released today: https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.scrollerProxy() 7 Link to comment Share on other sites More sharing options...
Houwer Posted July 8, 2020 Author Share Posted July 8, 2020 (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 July 8, 2020 by Houwer 1 Link to comment Share on other sites More sharing options...
ZachSaucier Posted July 9, 2020 Share Posted July 9, 2020 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? 3 Link to comment Share on other sites More sharing options...
Houwer Posted July 9, 2020 Author Share Posted July 9, 2020 So sorry. I had a typo on my code. It's working perfectly. Thank for your help. 1 Link to comment Share on other sites More sharing options...
nonsense27 Posted July 10, 2020 Share Posted July 10, 2020 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.. Link to comment Share on other sites More sharing options...
ZachSaucier Posted July 10, 2020 Share Posted July 10, 2020 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. 1 Link to comment Share on other sites More sharing options...
nonsense27 Posted July 10, 2020 Share Posted July 10, 2020 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? Link to comment Share on other sites More sharing options...
ZachSaucier Posted July 10, 2020 Share Posted July 10, 2020 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. 1 Link to comment Share on other sites More sharing options...
nonsense27 Posted July 10, 2020 Share Posted July 10, 2020 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. Link to comment Share on other sites More sharing options...
GreenSock Posted July 10, 2020 Share Posted July 10, 2020 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. 1 Link to comment Share on other sites More sharing options...
nonsense27 Posted July 10, 2020 Share Posted July 10, 2020 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? Link to comment Share on other sites More sharing options...
GreenSock Posted July 10, 2020 Share Posted July 10, 2020 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. 1 Link to comment Share on other sites More sharing options...
nonsense27 Posted July 10, 2020 Share Posted July 10, 2020 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 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now