Menu example

[laxbuddha]

Hey there,

I have been trying to learn how to use greensock for all my animations for my entertainment technoloy classes.  There is one menu I have been trying to recreate, and I am not sure how they did it.  The site is www.newcastlebrown.com  .   the menu is on the left side of the website.  I am sure it is something I am overlooking and probably somewhat simple to do.  If anyone has any insigt to how to do this, please let me know.  Code samples are much appreciated.  I know they used greensock and tweenlite, so this is why I came to this forum to ask this question.  Thanks guys!

[Carl]

Hi 

 

I don't have a full demo of that type of effect. Googling "flash accordion menu" will get you close though.

 

To get an idea of how the file could be set up, check out this tutorial:

http://active.tutsplus.com/tutorials/effects/build-a-dynamic-flash-game-menu-the-accordion/

 

For the most part the code is overly complex and odd, BUT there is a very valuable comment on that article from Mike:

 

 

//basically you could have used 20 lines of code:

//left x, right x, index
panel1.props = {lx:0, rx:570, ind:1};
panel2.props = {lx:30, rx:600, ind:2};
panel3.props = {lx:60, rx:630, ind:3};
panel4.props = {lx:90, rx:660, ind:4};


panel1.addEventListener(MouseEvent.CLICK, onClick);
panel2.addEventListener(MouseEvent.CLICK, onClick);
panel3.addEventListener(MouseEvent.CLICK, onClick);
panel4.addEventListener(MouseEvent.CLICK, onClick);


function onClick(e:MouseEvent):void
{
var clicked:MovieClip = MovieClip(e.target);
for(var i:int=0; i<numChildren; i++)
{
var mc:MovieClip = MovieClip(getChildAt(i));
if(mc.props.ind <= clicked.props.ind)
//item is to the left
TweenLite.to(mc, 1, {x:mc.props.lx, ease:Bounce.easeOut});
else
//item is to the right
TweenLite.to(mc, 1, {x:mc.props.rx, ease:Bounce.easeOut});
}
}
 

It should give you an idea of how you need to figure out where the left edge of each item should be based on whether or not it is to the left or right of the clicked (opened) element. For your needs you would figure out top/bottom. 

 

For the nav you provided, the inner content is also vertically centering once the active element opens up. 

 

TweenLite can certainly handle the animation but there are a handful of calculations you will have to perform to get everything to move to where it should be. Hopefully this gives you an idea of the complexity.