Jump to content
Search Community

Smooth scrolling solution, that supports ScrollMagic

artyor 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


I went through greensock forum to find solution for smooth scrolling, and it was mostly Blake's codepen solution which pretty much worked as I want,
however I was wondering would they work with scrollmagic?

What exactly I mean is, I want to trigger gsap animations on element when they scroll into view, and for this I use scrollmagic. 
I was wondering if there will be problem with this since I read somewhere that this is just transform (which I saw with inspect element),
and since it's not "real scroll" scrollmagic wont read it and trigger it when it should?

This are Blake's codepens with smooth scrolling:

See the Pen QqPqbN by osublake (@osublake) on CodePen

See the Pen ee9e27534440ef6ee1c2e2fdfd6c7e68 by osublake (@osublake) on CodePen

Thanks in advance :)

See the Pen by (@) on CodePen

Link to comment
Share on other sites

Here is an example integration of ScrollMagic along with Smooth Scrollbar.


See the Pen gZGwoW by luluberlu (@luluberlu) on CodePen


The integration of those two is also discussed in the following discussion (perhaps others also).



Maybe that might assist you in some way if you wish to take that approach. Of course test extensively regardless of what approach you take to ensure what you create is performant across browsers and devices as the users scroll. 


@OSUblake, ? that example and related thread(s) will never die, its part of your legacy here at the forum.  ;--)  ¯\_(ツ)_/¯

  • Like 3
  • Thanks 1
  • Haha 1
Link to comment
Share on other sites

Here's my devil's advocate comment:


It sounds like all you're needing is to fire some animations when elements get scrolled into view. Unless you need some of the advanced functionality in the ScrollMagic library, a simpler approach would be to use the native IntersectionObserver API to listen for when elements get scrolled into view, and then call your GreenSock animations when that happens. It saves you from loading in another third-party library in favor of native functionality, and also gets rid of listening for the browser's scroll event, which is costly (I'm assuming that ScrollMagic still listens for the scroll event; they may have changed that since I've used the library).


In regards to the smooth scrolling, I personally don't like it and typically recommend that others not do it. I'm sure some of it has to do with preference, but there are also some accessibility and other concerns with smooth scrolling. So if you do decide to incorporate that effect, please be mindful.

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