Jump to content
GreenSock

emilychews

Using GSAP to Create a Smooth Scroll Effect

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

Hi

 

Is it possible with GSAP to create a smooth scroll type animation for mouse-wheel functions?  The scroll judder on Chrome on a Mac  is awful (chrome have removed the ability to smooth scroll on Mac OS for good apparently) and I've seen this site where the scroll is absolutely buttery smooth with a mouse well on mac for chrome when using a third party mouse (i.e. not an apple trackpad or magic mouse).


http://www.goodkids.studio/

 

I'm not concerned about certain animations being triggered by scroll events because I know there are libraries out there that do that.  It's more the smooth scroll itself.  Because GSAP is so buttery smooth I'm wondering if it is possible with GSAP?

 

Any ideas as to how they've done this would be amazing.

Emily.

 

 

 



 

Link to comment
Share on other sites

Sorry, not really sure what you are asking or what solution you are looking for. 

@OSUblake has posted a few demos related to scrolling and animations that don't use 3rd party libraries like ScrollMagic. Perhaps some answers lie within for you

 

See the Pen 0d4742d2200d028ed42297cb874af2b5 by osublake (@osublake) on CodePen

 

See the Pen 46295694a457cc0c61f32a8153e26639 by osublake (@osublake) on CodePen

 

  • Like 3
Link to comment
Share on other sites

That site is using GSAP, although I don't know if it's for scrolling. 

 

They are probably doing something like the second example Carl posted, but animating the change in a timeline, maybe using something like tweenTo. But that's just a guess. I didn't look at their code to see what they're actually doing. Whatever they're doing, it isn't native because my Home, End, Page Up, and Page Down buttons do nothing.

 

  • Like 1
Link to comment
Share on other sites

I tried looking at the code initially, but the main.js file is 28,000 lines of JS where they've concatenated all of their JS files into one.  It's a beautiful effect.  I don't know why other browsers won't introduce smooth scroll like firefox  have. Chrome when using a normal mouse/mouse wheel is so horrendously juddery when scrolling these days.  I've been doing further research, and I think it's going to be more of a long-term learning curve to get that type of effect :). GSAP should do a paid smooth-scroll plugin for mouse-wheels, they'd make a small fortune :)

Thanks for the above.

Emily.

Link to comment
Share on other sites

Chrome does have smooth scrolling, just not on macOS. 

8AwjZB7.jpg

 

If your scrolling is really bad, there are Chrome extensions and apps that can help with that.

 

  • Like 1
Link to comment
Share on other sites

10 hours ago, emilychews said:

I've been doing further research, and I think it's going to be more of a long-term learning curve to get that type of effect :)

 

Start out small, and work your way up. Scrolling is just a transform that moves some content up and down. And it works kind of like a camera, so if you scroll 3 lines down, you would move the content 3 lines up. 

 

Here's an example of how you could do that using your mouse wheel. It's probably not something you would want to use in production, but it gives you an idea of how it works. Get that down, and then work your way up to scrolling using the arrow keys and touch.

 

 

 

  • Like 1
Link to comment
Share on other sites

Hi,

 

Slowness often has something soothing ...

 

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

 

Best regards from Hamburg

Mikel

  • Like 3
Link to comment
Share on other sites

Blake - that is amazing.  I'm genuinely absolutely gobsmacked.  
 

I've just been doing a bit of googling - to transfer that so it also works on the up and down arrows on my keyboard as well, will I duplicate the code in the onWheel function, into a function called say, onArrowPress, and then add two event listeners for a keydown event using the relevant key codes for the up and down arrows (38 and 40)?
 

  • Like 2
Link to comment
Share on other sites

Thanks!

 

I'll make a demo showing how to do that. Working with keydown events can be a little tricky because they will constantly fire.

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