Search the Community
Showing results for tags 'unfold'.
-
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.