Superloop Posted April 4, 2022 Share Posted April 4, 2022 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 More sharing options...
Cassie Posted April 4, 2022 Share Posted April 4, 2022 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 1 Link to comment Share on other sites More sharing options...
Martin Erren Posted April 4, 2022 Share Posted April 4, 2022 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 More sharing options...
Cassie Posted April 4, 2022 Share Posted April 4, 2022 Hi Martin, Welcome to the forums. Do you have a demo showing the issue? Link to comment Share on other sites More sharing options...
Martin Erren Posted April 4, 2022 Share Posted April 4, 2022 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 More sharing options...
Cassie Posted April 4, 2022 Share Posted April 4, 2022 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 More sharing options...
Martin Erren Posted April 4, 2022 Share Posted April 4, 2022 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 ... 1 Link to comment Share on other sites More sharing options...
Cassie Posted April 4, 2022 Share Posted April 4, 2022 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 More sharing options...
Martin Erren Posted April 4, 2022 Share Posted April 4, 2022 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(); }); Link to comment Share on other sites More sharing options...
Martin Erren Posted April 4, 2022 Share Posted April 4, 2022 (edited) 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 April 4, 2022 by Martin Erren Link to comment Share on other sites More sharing options...
Solution GreenSock Posted April 4, 2022 Solution Share Posted April 4, 2022 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? 2 Link to comment Share on other sites More sharing options...
Martin Erren Posted April 4, 2022 Share Posted April 4, 2022 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 More sharing options...
GreenSock Posted April 5, 2022 Share Posted April 5, 2022 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? 2 Link to comment Share on other sites More sharing options...
Superloop Posted April 5, 2022 Author Share Posted April 5, 2022 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 1 Link to comment Share on other sites More sharing options...
GreenSock Posted April 5, 2022 Share Posted April 5, 2022 These things should be fixed in the next release which you can preview at: ScrollTrigger: https://assets.codepen.io/16327/ScrollTrigger.min.js?v=3.10.3b ScrollSmoother: https://assets.codepen.io/16327/ScrollSmoother.min.js?v=3.10.3b (only on CodePen/CodeSandbox/local) Better? Sorry again about the confusion there. Thanks for pointing out the issue(s). 1 Link to comment Share on other sites More sharing options...
Martin Erren Posted April 5, 2022 Share Posted April 5, 2022 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 ! 1 Link to comment Share on other sites More sharing options...
linkus Posted April 8, 2022 Share Posted April 8, 2022 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 More sharing options...
GreenSock Posted April 10, 2022 Share Posted April 10, 2022 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: ScrollTrigger: https://assets.codepen.io/16327/ScrollTrigger.min.js?v=3.10.3i ScrollSmoother: https://assets.codepen.io/16327/ScrollSmoother.min.js?v=3.10.3i (only on CodePen/CodeSandbox/local) Does that work well for you? 1 Link to comment Share on other sites More sharing options...
linkus Posted April 11, 2022 Share Posted April 11, 2022 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 More sharing options...
GreenSock Posted April 12, 2022 Share Posted April 12, 2022 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 More sharing options...
linkus Posted April 12, 2022 Share Posted April 12, 2022 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 More sharing options...
Superloop Posted April 12, 2022 Author Share Posted April 12, 2022 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 More sharing options...
OSUblake Posted April 12, 2022 Share Posted April 12, 2022 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 More sharing options...
GreenSock Posted April 12, 2022 Share Posted April 12, 2022 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 More sharing options...
Superloop Posted April 12, 2022 Author Share Posted April 12, 2022 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now