Jump to content
Search Community

Select2 and GSAP ScrollSmoother

Skilltech test
Moderator Tag

Go to solution Solved by Skilltech,

Recommended Posts

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.

  • Like 1
Link to comment
Share on other sites

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

 

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

 

  • Like 2
Link to comment
Share on other sites

  • Solution

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

 

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.

 

 

 

  • Like 2
Link to comment
Share on other sites

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

 

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

 

  • Like 3
Link to comment
Share on other sites

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

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

 

  • Like 2
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.
×
×
  • Create New...