Need help with logic of converting foldable navigational menu from CSS transitions to GSAP

[yaharga]

I need help with a navigational menu I've designed with CSS transitions; need to convert it to GSAP since CSS transitions looked super slow on mobile devices. If GSAP is also slow on mobile devices, please let me know now.

 

Here are the things I need to happen to the menu:

• Unfold corresponding ul when clicking "Menu" or a "+" sign in the li.
• There may only be one tree unfolded; if you unfold another menu, the corresponding menus unfold while the other open menu/tree folds back.
• When folding back, the menus unfold from deepest open children to the top menu corresponding to the button toggled.

If you need to see how I want it to work, check out the Codepen URL. I'm thinking of the most efficient way to do this; create one timeline and put all the tweens in as it goes, tween each button as it goes (then remove or delete the tweens), or what else?

 

I've already started by creating a TimeLineLite and managed to unfold everything in one tree, and can reverse the whole thing when I click the "Menu" button, but I don't know how to reverse to the point where the button is clicked; for example, if the navigational menu is opened up 4 levels deep, and I click on the second one, how do I reverse to the second level menu? Also, if I clicked on a sibling menu button, and I managed to close the previously open menus, how would I simultaneously add the tweens of the opened menu to the timeline to replace the tweens of the previously open menus while they're all tweening?

 

There are many ways to do this, I'm sure, but since I'm new to GSAP, I thought someone more knowledgable might be able to enlighten me with the obvious solution. I know I could tween with every click, but do Tweens stay after they're finished, or do they get removed and deleted? How can I delete them? How would they affect performance? Do they stay in memory waiting all that time?

 

Appreciate any help I can get.

See the Pen grBmRg by yaharga (@yaharga) on CodePen

[Carl]

Hi and welcome to the GreenSock forums,

 

If you are unhappy with the performance using CSS you are probably doing something that isn't going work miraculously better just by switching to GSAP. 

It's important to note that there isn't anything about GSAP that is inherently "slow on mobile", it all comes down to how many things you are animating at once and how hard it is for that device to render those changes.

 

If isn't feasible for us to sift through and try to decipher all that css code and convert it, but my advice would be to not try to use a single timeline for this. Since user interaction is involved and there are many different ways certain things can be opening while others are closing it just isn't feasible to try to have all those animations pre-existing in a timeline and then try to figure out where to jump in that timeline at any given time. 

 

If you were just opening and closing a single menu, a timeline would be fine, but since you are opening and closing multiple, nested, sub-sections its a different beast.

 

One approach is just use the existing logic you already have in place but everywhere you add or remove a class to trigger a CSS transition just generate a new TweenLite tween to animate those properties. (probably the easiest since you are already intimately familiar with the code structure).

 

Another way is to attack this in a more object-oriented way where each sub-menu is an object with open() and close() methods. Those open() and close() methods generate tweens or timelines on the fly for opening and closing each sub-menu. 

 

When you click on a menu item to open it you would check to see if another menu is open, if so maybe code something like this rough pseudo-code:

if(currentMenu) {
  currentMenu.close()
  clickedMenu.open();
  currentMenu = clickedMenu;
}

GSAP has been optimized for performance and garbage collection. if you create a bunch of un-referenced tweens they will be destroyed when they are no longer needed. Creating tweens on the fly as I have suggested will work fine.