Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Marc T.

Scrollsmoother and modal

Go to solution Solved by GreenSock,

Recommended Posts

Hi!

I'm using Scrollsmoother in a website and I have some problems. 

I'd like to open a modal with scroll but overflow: auto; in this modal doesn't work.

I also try to use two instances of ScrollSmoother but it doesn't work either.

Can anyone help me?

 

Thanks!

See the Pen zYppKmL by marctaule (@marctaule) on CodePen

Link to comment
Share on other sites

Hey there Marc!

TLDR: paused() is stopping the smoothScroll by ignoring scroll events - so you won't be able to listen for scroll events on that modal div.

If you need to listen for scroll events you could optionally kill() the smoother and instantiate it again

See the Pen XWVVRMO?editors=0110 by GreenSock (@GreenSock) on CodePen


 

Link to comment
Share on other sites

Hi, 

 

i have similar Problems. In my case I am using Bootstrap Modals. Next SmootherScroll I have some ScrollTrigger applied to my site ... My first approach was to kill and recreate. Kill is working as aspected. The Bootstrap Modals do work. But recreate does not help ... afterwards all animations to not work as aspected. The trigger Elements seem not to work correctly and elements with the attributes data-speed are replaced after closing ... paused() would do it, but in most Modals I need scrolling as well, so it is not really an option ... any ideas? Thx and Kind regards, Martin 

 

Link to comment
Share on other sites

Hi Martin,

 

Welcome to the forums. Do you have a demo showing the issue?

Link to comment
Share on other sites

6 minutes ago, Cassie said:

Do you have a demo showing the issue?

Hi. Here a link with the draft version of the customer project: http://wienerwald.gastro-holding.de user:password -> gsap:gsap

thx for your reply. Kind regards, Martin 

 

PS: you can open a modal by clicking at the red marked text passages ... 

Link to comment
Share on other sites

Sorry Martin, I should have stated.

I'm specifically looking for a codepen or codesandbox demo. A minimal demo - just the smallest amount of code possible to recreate the issue.

Link to comment
Share on other sites

Hey Cassie, 

 

this is not that easy ... here are many components that may cause these problems. At the end there are for sure some things, that do not work as I accept things should work ... for now , I have to do some work to break things down and see what happens ... if I got some ideas, I am going to write an update ... thx for your help. Best Martin 

 

PS: in this case I also run out of time ... so maybe I have to think about a workaround ... maybe locomotive scroll is an option ... 

 

  • Like 1
Link to comment
Share on other sites

We can definitely help you - But we can't help you without seeing the code. We're not magicians I'm afraid.

You may also have to call ScrollTrigger.refresh() when you reinstantiate the smoother? 

It'll very likely be quicker to give us a bit more information so that we can help, rather than to scratch everything, go with locomotive scroll and (probably) run into the same issue.

Link to comment
Share on other sites

Hey Cassie, 

 

thx for your offer ... to break things down, so that you really can help needs a bit time ... otherwise as you say it is to difficult do get the problem ...

for now I reduce as much as I can ... I tried ScrollTrigger.refresh()  , but it does not change the behavior of the side ... it seems that the trigger do not work correctly after reinstantiate smoother ... all container with the data-speed attribute are moving some pixels up or down ... animations who depends on Scroll Trigger do not work correctly ... 

 

Find attached some js and tho images who show the position of some text before and after closing (reinstantiate and refresh) the modal. 

 

Martin

 

let smoother;

function smootherSetup() {
  smoother = ScrollSmoother.create({
    smooth: 2,               
    effects: true,  
    smoothTouch: 0.1 ,  
    normalizeScroll: true, 
    ignoreMobileResize: true 
  });
}

function triggerUpdate() {
  ScrollTrigger.refresh()
}

smootherSetup();

var myModalEl = document.getElementById('gruenderModal')

myModalEl.addEventListener('show.bs.modal', function (event) {

});

myModalEl.addEventListener('hide.bs.modal', function (event) {

  smootherSetup();
  triggerUpdate();

});

 

Bildschirmfoto 2022-04-04 um 22.43.34.png

Bildschirmfoto 2022-04-04 um 22.43.45.png

Link to comment
Share on other sites

1 hour ago, Cassie said:

Sorry Martin, I should have stated.

I'm specifically looking for a codepen or codesandbox demo. A minimal demo - just the smallest amount of code possible to recreate the issue.

See the Pen OJzzaWE by martin3r (@martin3r) on CodePen

 

Hi Cassis, Here is one problem I see ... every time you click on the "click me" button the text moves ... 

 

Best, Martin 

 

PS: if I click within this environment here the text moves down ... in a fullscreen environment in codepen.io it moves up :-)  I really have no idea ... 

Edited by Martin Erren
Link to comment
Share on other sites

  • Solution

I haven't looked at your latest CodePen, but if your goal is to allow the modal to scroll with a mouse wheel, you could intercept the wheel events and stopPropagation() if the target is in a scrollable element that's not the <body>/<html>: 

See the Pen QWaaJMo?editors=0010 by GreenSock (@GreenSock) on CodePen

 

const modalScroll = {
		_handler: e => {
			let node = e.target;
			while (node && node.scrollHeight <= node.clientHeight) node = node.parentNode;
			node && node !== document.body && node !== document.documentElement && e.stopPropagation();
		},
		enable: () => document.addEventListener("wheel", modalScroll._handler, { passive: true, capture: true }),
		disable: () => document.removeEventListener("wheel", modalScroll._handler)
	};

Usage:

modalScroll.enable();  // enable
modalScroll.disable(); // disable

 

Does that help?

  • Like 2
Link to comment
Share on other sites

Hi Jack,

 

this helps ... I am going to test this on mobile and other devices ... but for now it really helps ...  

 

is it also possible , that you just have a short look on my codepen above ... I also want to understand what happens there. So, if you have any comments to my example , I would appreciate it.  

 

Thx,

Martin 

 

Link to comment
Share on other sites

5 hours ago, Martin Erren said:

is it also possible , that you just have a short look on my codepen above ... I also want to understand what happens there. So, if you have any comments to my example , I would appreciate it.  

Sorry about any confusion there - the problem is that the effects-related stuff needs to be reverted which isn't happening in the ScrollSmoother's kill() (that should be fixed in the upcoming release). As a band-aid solution in the current version, you can add this line right before your smoother.kill(): 

smoother.effects().forEach(st => st.vars.onRefreshInit());

See the Pen jOYYRQy?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Better?

  • Like 2
Link to comment
Share on other sites

9 hours ago, GreenSock said:

I haven't looked at your latest CodePen, but if your goal is to allow the modal to scroll with a mouse wheel, you could intercept the wheel events and stopPropagation() if the target is in a scrollable element that's not the <body>/<html>: 

 

 

 

const modalScroll = {
		_handler: e => {
			let node = e.target;
			while (node && node.scrollHeight <= node.clientHeight) node = node.parentNode;
			node && node !== document.body && node !== document.documentElement && e.stopPropagation();
		},
		enable: () => document.addEventListener("wheel", modalScroll._handler, { passive: true, capture: true }),
		disable: () => document.removeEventListener("wheel", modalScroll._handler)
	};

Usage:

modalScroll.enable();  // enable
modalScroll.disable(); // disable

 

Does that help?

 

9 hours ago, GreenSock said:

I haven't looked at your latest CodePen, but if your goal is to allow the modal to scroll with a mouse wheel, you could intercept the wheel events and stopPropagation() if the target is in a scrollable element that's not the <body>/<html>: 

 

 

 

const modalScroll = {
		_handler: e => {
			let node = e.target;
			while (node && node.scrollHeight <= node.clientHeight) node = node.parentNode;
			node && node !== document.body && node !== document.documentElement && e.stopPropagation();
		},
		enable: () => document.addEventListener("wheel", modalScroll._handler, { passive: true, capture: true }),
		disable: () => document.removeEventListener("wheel", modalScroll._handler)
	};

Usage:

modalScroll.enable();  // enable
modalScroll.disable(); // disable

 

Does that help?

Thanks @GreenSock! For me this works perfect ;)

  • Like 1
Link to comment
Share on other sites

These things should be fixed in the next release which you can preview at: 

Better?

 

Sorry again about the confusion there. Thanks for pointing out the issue(s). 

  • Like 1
Link to comment
Share on other sites

Hey Jack 

 

thank you for your efforts ... I am not used to asking for help in forums ... first time since 25 years of working as a developer ... I check all this stuff out, if there ist time ... for now I go with your approach mentions before ... the other here mentioned idea shows some errors on the different mobile devices ... in future we will use GSAP more often for our projects , at the moment I still have some problems on mobile devices, but I think its getting better . and now I know where to put my questions ...

 

Kind regards,

Martin 

 

PS: sry for my English Skills !

  • Like 1
Link to comment
Share on other sites

On 4/5/2022 at 12:50 AM, GreenSock said:

I haven't looked at your latest CodePen, but if your goal is to allow the modal to scroll with a mouse wheel, you could intercept the wheel events and stopPropagation() if the target is in a scrollable element that's not the <body>/<html>: 

 

 

 

const modalScroll = {
		_handler: e => {
			let node = e.target;
			while (node && node.scrollHeight <= node.clientHeight) node = node.parentNode;
			node && node !== document.body && node !== document.documentElement && e.stopPropagation();
		},
		enable: () => document.addEventListener("wheel", modalScroll._handler, { passive: true, capture: true }),
		disable: () => document.removeEventListener("wheel", modalScroll._handler)
	};

Usage:

modalScroll.enable();  // enable
modalScroll.disable(); // disable

 

Does that help?

Hey @GreenSock, your solution works perfectly on desktop browsers, but how would you do this on touch devices?

Link to comment
Share on other sites

Hi @linkus - we've actually built in a solution in the next release that will let you activate it like this: 

 

ScrollTrigger.normalizeScroll({ allowNestedScroll: true });

 

You can preview the files at:

Does that work well for you? 

Link to comment
Share on other sites

Unfortunately I can't test it anymore, since after a few days of testing I tried my site on iOS and it's jittery and unusable as long as my finger is touching the screen (while normalizeScroll is on), so I had to move back to another smoothscroll library, at least untill this is fixed :(

Link to comment
Share on other sites

Version 3.10.3 is officially out (just waiting on the CDN to update). Please give that a try.

 

I'm very curious to see a minimal demo of the jittery/unusable scrolling you described. Is there any way you could provide that? It could help us make the tools better. 

Link to comment
Share on other sites

Here's a small demo with the bare minimum (open link on an iOS device, it's a debug view link):

See the Pen gOojdxR by linkus (@linkus) on CodePen



On iOS (both safari and chrome) the scroll fps drops down massively while touching the screen. Once I stop touching (after flicking) it's smooth.
Also, on iOS safari the browser bars show/hide, while on iOS chrome they don't (which is the expected behavior). Also, on iOS safari it sometimes starts jumping while in mid-scroll.
And another interesting thing, even though the documentation states that there's no smoothing of the native scroll, it still doesn't look like native scroll, as it scrolls faster than my finger.

I've been using 🍑 ASScroll up until now, which works 100% perfectly on all devices, it never shows/hides the url bars on any browsers, doesn't lag while touch-scrolling, always perfectly reports the scroll positions and it relies on native scroll on touch devices (all of which I wish ScrollSmoother would do too).

Link to comment
Share on other sites

Hi @GreenSock!

I've just update to version 3.10.3 but when I use smoother.paused(true) I receive the following error in my console:
 

Uncaught TypeError: _inputObserver is not a function
    at ScrollSmoother.paused (app.js?id=17ee648e3af68080c2b4:50265:23)
    at openNav (app.js?id=17ee648e3af68080c2b4:53012:25)
    at HTMLDivElement.<anonymous> (app.js?id=17ee648e3af68080c2b4:53047:17)
    at HTMLDivElement.dispatch (app.js?id=17ee648e3af68080c2b4:22187:27)
    at HTMLDivElement.elemData.handle (app.js?id=17ee648e3af68080c2b4:21991:28)

Do you have any idea about it?

Thanks!

Link to comment
Share on other sites

Hi @Marc Taule

 

Can you make a demo showing that issue? I'm not seeing anything wrong in your first CodePen, and that is using the most current version.

Link to comment
Share on other sites

You must be using mismatched versions, like the latest ScrollSmoother with an older ScrollTrigger. Maybe clear your cache?

Link to comment
Share on other sites

47 minutes ago, GreenSock said:

You must be using mismatched versions, like the latest ScrollSmoother with an older ScrollTrigger. Maybe clear your cache?

Nice! I didn't update my gsap version correctly :) Thanks @GreenSock!

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