Toggle sub-menu with fading/blurring parent when sub-menu is shown/toggle

[Louienator]

Hi Good day,

 

Is that possible in GSAP that if you click/toggle the plus sign, the parent menu will be blurred or opacity: 0.4 while the sub-menu is shown? 

 

here's my fiddle:

 

https://jsfiddle.net/yhbd90kL/126/

 

Cheers,

Louie V.

[Rodrigo]

Hi,

 

Your example is not working properly, please check it in order to provide a working example.

 

It shouldn't be more complicated than this though:

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

 

Hopefully this helps.

Happy Tweening!

[Louienator]

Hi Rodrigo,

 

i think here's what i'm referring to but when ever i click the plus, it will toggle and if i open another, the previous one closes then the current being clicked is open.  Here's my fiddle

 

https://jsfiddle.net/yhbd90kL/128/

[mvaneijgen]

You'll need to scope the elements to their current .each() right now when you click you get all the .sub-menu items and thus they will all play. 

 

I've modified your HTML so that .sub-menu is a child of .expand-menu and have renamed the button to be .expand-menu-toggle, so now you can target $('.sub-menu', this) and it will scope it to the current .expand-menu.

 

Then what I do is catch all subMenu timelines and on .play() of a timeline reverse() all other timelines. Hope it helps and happy tweening! 

 

https://jsfiddle.net/u34y8ofn/

[Rodrigo]

Hi,

 

Maybe something like this:

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

 

Hopefully this helps.

Happy Tweening!

[Louienator]

Thanks @mvaneijgen and @Rodrigo.. With regards to this concept, does this has the implementation with a desktop menu drop down? where you can opoen a dropdown and when another dropdown opens, the previous sub-menu will close automatically? thanks

[Rodrigo]

1 hour ago, Louienator said:

With regards to this concept, does this has the implementation with a desktop menu drop down? where you can opoen a dropdown and when another dropdown opens, the previous sub-menu will close automatically?

Hi,

 

I  don't understand this question actually. Isn't the latest demo doing that exactly? What behaviour are you looking for? Do you have an example so we can take a look?

 

Happy Tweening!