How to close active popup when another link is clicked

[Billy Bacon]

I'm trying to help a colleague with an issue he's encountering, I've read through many posts, includes (Learning GSAP 3: 2 FAQs Using Timeline with 2 Scenes and Modal Popup from text link), some of the docs and I'm at a loss as to why his implementation in not working as desired. I tried some javascript additions to force a button close event to close the active popup but nothing is working so I'm obviously fighting against the framework and need to leverage the internal events. 

 

If you go to the following URL, at the bottom of the page, there are two footer links. Clicking About Us will make that popup active, but when you click Lawyer Up link next to it, it does not close the original popup so it stacks these modals. If you then click the X, it closes both of them which gives a slightly weird user experience. If you perform those steps in the other order, click Lawyer Up first, then About Us, it doesn't close Lawyer Up but pops up the About Us behind it, then clicking the X to close closes both of them.

 

http://rangelaw.nichez.com

 

We just want the links at the bottom of the page to close any existing popup that might already be open and replace it with the one clicked.

 

Is this something anyone here can help with by inspecting the developer tools at our test site URL above?

 

Thank you for any help you can provide.

 

Bacon

[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 CodeSandbox that demonstrates the issue? 

 

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. 

[Ezra Siton]

This Q not related to GSAP.  The best idea is to use some modal js libary (And you find `close()` API method + Accessibility).
Or add custom JS code & click events.

 

Example:

https://micromodal.vercel.app/

[Rodrigo]

Hi,

 

It seems that you're not using any framework (Vue, Svelte, React, etc), so it seems that the best course of action is to create a boolean that indicates that a modal is open and in your code check for that and before opening a new modal close the current one. Something like this:

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

 

Hopefully this helps.

Happy Tweening!

[Billy Bacon]

Thank you for the replies here, I really appreciate. To the first responder, I provided a link to the site instead of the codepen because breaking up the site to a minimum would potentially not give the entire picture of what's going on in the event that something unrelated to gsap is faulting the behavior I'm looking for. 

 

Ezra Siton - I'm not sure why you indicate that this is not a GSAP question, the GSAP plugin is used to launch the modals and provide the animation for opening and closing the modal. 

 

Rodrigo - thank you for the codepen, I see your sample is using the gsap.to() functions from the plugin. Your example and the behavior it demonstrates is exactly what I'm looking for. I will try to incorporate what you've done in your javascript and see if I can get the issue to go away.

 

Thanks again.

 

Billy 

[Ezra Siton]

16 hours ago, Billy Bacon said:

havior I'm looking for. 

 

Ezra Siton - I'm not sure why you indicate that this is not a GSAP question, the GSAP plugin is used to launch the modals and provide the animation for opening and closing the modal. 

 

Because for pure popup it is better to use accessible modal. Close by touch gestures, ARIA, back mobile button and much more (To show/hide DIV overlay by simple JS - its not enough). Technical yes - it is easy to build modal on GSAP (But this is not fancybox3 -or- vercel).