GSAP animation

[Shahram]

How to enable GSAP for other Nav Menus that do not interfere with each other and switches to the corresponding menu by clicking on each menu?

See the Pen dygEmVe by ShahramShakiba (@ShahramShakiba) on CodePen

[mvaneijgen]

Hi @Shahram welcome to the forum!

 

What I would do is create timelines for each animation "open navigation", "shop panel", "blog panel" and  "contact panel". Then animate "open navigation" and the menu item that is clicked. Then when clicking on blog check if "open navigation" has already played and reverse the panel that has already been clicked. 

 

If the animation "open navigation" has not been clicked it probably means that none of the panel  animations has been played. 

 

// Person clicks shop, then blog
Animate "open navigation
Animate "shop panel"
// User now clicks blog "open navigation" als already been open
Reverse "shop panel"
Animate "blog panel"

 

As a side note: is there any reason you're loading GSAP 3.9.1? Where are currently one version 3.11.5 and you're using the old GSAP 2 syntax the GSAP 3 syntax is much easier and more readable check out https://greensock.com/3-migration/