Skilltech Posted December 21, 2022 Share Posted December 21, 2022 ScrollSmoother has buggy behavior with Select2. To replicate: integrate select2, initialize it on any "select" element, click the dropdown and scroll while the dropdown is open see the dropdown options detach from the dropdown itself Link to comment Share on other sites More sharing options...
GSAP Helper Posted December 21, 2022 Share Posted December 21, 2022 I've never heard of Select2 before. 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 CodeSandbox that demonstrates the issue? It certainly sounds like an issue related to how Select2 works - maybe it assumes there are no transforms on the container because position: fixed will behave very differently in a container that has a transform applied. Totally guessing here since we don't have a minimal demo to look at. Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). 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 If you're using something like React/Next/Vue/Nuxt or some other framework, you may find StackBlitz easier to use. We have a series of collections with different templates for you to get started on these different frameworks: React/Next/Vue/Nuxt. Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. Please just keep in mind that we can't support 3rd party libraries since we didn't author them. 1 Link to comment Share on other sites More sharing options...
Skilltech Posted December 21, 2022 Author Share Posted December 21, 2022 I'm trying to avoid creating a codepen since this is a hugely used library. https://select2.org/ Have you heard of WooCommerce? It uses select2, among others. The point of my thread is not to deal with my specific issue but to bring it to the devs' attention since this is related to ALL WordPress themes which use Woocommerce aka 99.99% Ecommerce WordPress sites. Link to comment Share on other sites More sharing options...
akapowl Posted December 21, 2022 Share Posted December 21, 2022 I am not familiar with Select2 whatsoever, but I just had a quick look at their documentation (which by the way I would always suggest to do first, when something doesn't work for you.) They do have an option for dropdownParent, which you will likely have to use and set the proper element where their container is being set up, because otherwise the Select2 relevant container will be set up on the body and thus not work properly with ScrollSmoother, as all the smooth-scrolling relevant content needs to be inside the smooth-scrolling element. BTW this is not a Scroll-Smoother specific thing at all IMHO and will very likely be the same / similar across any smooth-scrolling library you are going to use. Not only does a minimal demo make it easier for those that you are asking for help to help you, but almost always it will be neccessary to help understand the issue you are having in the first place. Here is a demo showing that Select2 and ScrollSmoother work together just fine, if set up properly - if this doesn't resolve things for you, make sure to include a minimal demo of your own - for your convenience you could just fork this example of mine and tweak it to showcase your issue. See the Pen YzjPgOz by akapowl (@akapowl) on CodePen 2 Link to comment Share on other sites More sharing options...
Solution Skilltech Posted December 21, 2022 Author Solution Share Posted December 21, 2022 For anyone using select2 with ScrollSmoother, you can force the dropdown close on scroll like so: /** * Initialize Select2 */ var targetForSelect2 = 'select'; // we'll reuse the selector $( targetForSelect2 ).select2({ // your options }); // on window scroll, close any open select2 dropdowns $(window).scroll(function() { var select2Dropdown = $( targetForSelect2 ); if (select2Dropdown.length) { select2Dropdown.select2( 'close' ); } }); Link to comment Share on other sites More sharing options...
Skilltech Posted December 21, 2022 Author Share Posted December 21, 2022 3 minutes ago, akapowl said: They do have an option for dropdownParent, which you will likely have to use and set the proper element where their container is being set up I tried it of course, it's not working for me. Link to comment Share on other sites More sharing options...
akapowl Posted December 21, 2022 Share Posted December 21, 2022 Unfortunatelly it is impossible to help without seeing any of your code or knowing how you have set things up. Since the codepen demo above appears to be working just fine (at least for me it does - or are you saying that not even the example above is working for you?) I'd say this isn't a ScrollSmoother problem then, but it must be something about how things are set up in your environment. I myself am not familiar with Wordpress at all, so I won't be able to help. The only thing I can do is point you to this recent help article, although I'm not sure if this will help you any further. 2 Link to comment Share on other sites More sharing options...
Skilltech Posted December 21, 2022 Author Share Posted December 21, 2022 1 hour ago, akapowl said: Unfortunatelly it is impossible to help without seeing any of your code or knowing how you have set things up. Woocommerce uses a modified version of select2, called selectWoo. And when "dropdownParent" is used, it throws an error "Uncaught TypeError: l.css is not a function". Link to comment Share on other sites More sharing options...
akapowl Posted December 22, 2022 Share Posted December 22, 2022 I googled for this "selectwoo m.css is not a function" and got this as the first result: https://github.com/select2/select2/issues/4289 First suggestion in there says: Quote My guess is that you need to pass in dropdownParent as dropdownParent: $('#compareTab'), because Select2 is most likely expecting the parent to be a jQuery/DOM object. That does resolve the error with selectWoo for me. Hope that will help - other than that, I'm afraid this really sounds more like a problem with the 3rd party script you are using and there very likely isn't much GreenSock can do about it. So if you still get any errors with that, maybe try contacting the creators of SelectWoo. See the Pen dyjPLwv by akapowl (@akapowl) on CodePen 3 Link to comment Share on other sites More sharing options...
Skilltech Posted December 22, 2022 Author Share Posted December 22, 2022 43 minutes ago, akapowl said: That does resolve the error with selectWoo for me. Thanks! It did remove the error. But the "dropdown options" element is now behaving wacky i.e. goes counter to scroll direction (when I set #smooth-content as dropdownParent). So I'll have to stick with my patch of forcing it to close on scroll. Link to comment Share on other sites More sharing options...
akapowl Posted December 22, 2022 Share Posted December 22, 2022 7 minutes ago, Skilltech said: But the "dropdown options" element is now behaving wacky i.e. goes counter to scroll direction (when I set #smooth-content as dropdownParent). So I'll have to stick with my patch of forcing it to close on scroll. I'm not sure what you mean by that, as I can not see anything like that in the codepen demo I posted. The only thing I see is that the dropDown changes position, to appear above or below the select element depending on how much space there is towards the top/bottom edge of the viewport - but that again is nothing GSAP / ScrollSmoother related but comes with Select2/SelectWoo. I'm going to head out now, so if you have any GSAP specific questions, make sure to include a minimal demo alongside a clear description of your issue, so it will become more apparent for others, how to possibly help. Good luck with the project! See the Pen RwBNmRy by akapowl (@akapowl) on CodePen 2 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