Search the Community
Showing results for tags 'unfolding'.
Found 3 results
-
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. -
Hi all! I'm having several issues while attempting to develop a "paper-like" folding animation (like this one: http://codepen.io/rendro/pen/dxtHc). As you can see, in my pen the two parts split and that's because of the transformOrigin; if I switch the origins like below var $foldUpper = new TweenMax($upper, 0.5, { rotationX: "-45deg", transformPerspective: 2500, transformOrigin: "bottom center", transformStyle:"preserve-3d" }); var $foldLower = new TweenMax($lower, 0.5, { rotationX: "45deg", transformPerspective: 2500, transformOrigin:"top center", transformStyle:"preserve-3d" }); I can successfully folding keeping the elements together (since they fold using the center of the container as reference) but I also want to keep the upper border sticked to the top of the main container. The other issue I noticed is a strange "snap" (or lag) when I get back to the original position. Could you help me? Best Regards, Maurizio
-
Hi good people of the forum. I'm trying to animate an opening gift box with the lid popping of and the sides folding down. I was able to do a draft concept using shape tweens in Flash itself after struggling like hell trying to do it with TweenMax. (attached is the swf) I'm fairly familiar with TweenMax / TimelineMax. Something like TweenMax.to(mc, 2, {rotationY:90}) is easy but I quickly run into issues as far as the anchoring points go especially when it comes to the skewed sides. Anybody got some great ideas to get me going? Cheers gift box.zip
