timeline GSAP Timeline working incorrect in modal close/open

[DanielLav]

Hello GSAP community 👋 I had a problem with the animation being quite light I think xD. But I spent hours and couldn't implement it.

 

I am attaching my codepen so you can see my code:

 

I'm creating an animation for a modal window to appear to select the language version of the site. My animation works correctly when opening and closing the very first time, but as soon as I try to open/close my modal window again the animation breaks.

 

I think it has to do with this line of code

langContainer = $(this).siblings('.lang-container')

I use it because on my site there are several places with a language switch and I don't want them all to open at once.

 

I also need that when a modal window is open, if the user clicks anywhere on the site except the modal window itself, then it closes.

 

Perhaps you have ideas on how this can be done? I tried to simply add a reverse timeline when clicking on a $document, but with this approach it will also capture the modal window.

 

Write if you need more information.

I will be incredibly grateful for your help!

See the Pen wvbyXQW by ProjectDCL (@ProjectDCL) on CodePen

[Cassie]

Heya!

 

So a loop is really what you want here, I'm pretty rusty with jQuery, but something like this?

See the Pen QWRQZxd?editors=0011 by GreenSock (@GreenSock) on CodePen

You can bind the timeline to the element and then when there's a click on the document (that isn't the lang element), do a loop again, check if any of them are open and if so, close them.

[DanielLav]

@Cassie Thank you very much! That's what I need. 😊