Jump to content
GreenSock

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

Smooth scrolling solution, that supports ScrollMagic

Recommended Posts

Hello,

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

Share this post


Link to post
Share on other sites

ScrollMagic is not a  GreenSock product. There are threads about it here, but it's not officially supported. That being said, check out this post and demo from @OSUblake.

 

 

We've also discussed smooth scroll at length in these threads.

Happy tweening.

  • Like 2

Share this post


Link to post
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).

https://github.com/janpaepke/ScrollMagic/issues/652

 

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
  • Haha 1

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×