ScrollTrigger osx over-scroll

[Sublimio]

Hi,

I need to activate an animation that follows the elastic over-scroll of macOS when you scroll with the trackpad over the end of the page. In practice, an image should rotate and then return back. How can I intercept this over-scroll with scrollTrigger?

[GSAP Helper]

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or Stackblitz that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

[Sublimio]

Unfortunately, I don't have a code example yet, and it wouldn't work on CodePen anyway because CodePen's overflow:hidden window doesn't allow the rubber-band effect. I don't know if I explained well what I want to achieve. Basically, using the trackpad or touchscreen, you can scroll a few pixels beyond the HTML page. I just want to know if I can intercept  this scroll over the end of the page with scrollTrigger.

[mvaneijgen]

Hi @Sublimio, codepen has a debug view, which allows you to test in a 'normal' web environment, so it will definitely work on Codepen. 

 

I don't have time to create a demo for you and that is also not a service we can provide on these free forums.

 

I've used the Observer plugin (https://gsap.com/docs/v3/Plugins/Observer/) in the past to create a secret footer, which is hidden at first and only if you scrolled enough (with the over-scroll) will it reveal it self. 

 

As you can see this is version 1.8 which means it took me at least 8 versions to get the desired effect. Personally I use codepen to try out new ideas, I usually then just keep forking my pen to try out different ideas, either because I think it could be better or my original idea was not working. Usually at version 10 I got something I'm happy with. Creating forks of your pen will allow you to fall back at earlier ideas if something new is not working. 

 

You can fork the pen below and if it is your own pen you'll have access to the debug few of Codepen. Hope it helps and happy tweening! 

 

See the Pen oNyPqVW?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

 

[Sublimio]

ok thanks I will study your codePen and the Observer plugin!

[Rodrigo]

Hi,

 

That is not really a GSAP feature so is a bit beyond the scope of these forums (we try to keep everything GSAP related here).

 

Some time ago Jack crafted this helper function to stop that event (overscroll) but you could study/extract the code relevant to detect the event when it happens:

https://gsap.com/docs/v3/HelperFunctions/helpers/stopOverscroll/

 

Hopefully this  helps.

Happy Tweening!