Greensock Menu

[Guest Pusher]

Hi all,

 

Just trying to build a fancy mobile menu using Greensock.

 

I was wondering what the best way to make the + expand the menu and then the x to close it.

 

Can I change the #mobicon's onClick to onClick="menucloseFunction" with an oncomplete of the menuFunction() ?

 

Also, I had a thought that was to reverse the menuFunction() that I thought would work something like this but the reverse is not the normal colour when i enter it.

function menucloseFunction() {
menu.reverse()
}

Thanks for any help,

 

Phil

See the Pen PPKevJ by phillip_vale (@phillip_vale) on CodePen

[Diaco]

Hi Pusher 

 

pls try like this :

 

var menu = new TimelineLite()
.from("#mobmenu", 1, {height:0, ease:Power2.easeInOut})
.from("#mobicon", 1, {rotation:-45, ease:Power2.easeInOut},0)
.reversed(true);

function menuFunction() {  menu.reversed(!menu.reversed())  };

See the Pen VvzdYP by MAW (@MAW) on CodePen

[Guest Pusher]

That is awesome, thanks Diaco! I have updated the codepen.

 

However, it now opens when i refresh the page rather then only when i click the +.

 

Is it possible to cue the close as well with this method when a link in the <li> is selected? I was hoping to eventually make this trigger a scroll down the page.  

 

Can you also briefly explain how your above code works? Is it creating more of a toggle situation?

[Diaco]

pls do something like this :

var menu = new TimelineLite()
.from("#mobmenu", 1, {height:0, ease:Power2.easeInOut})
.from("#mobicon", 1, {rotation:-45, ease:Power2.easeInOut},0)
  .reversed(true);

var menuChilds = document.querySelectorAll('#mobile li,#mobicon');
for( var i=menuChilds.length ; i--; ){
  menuChilds[i].addEventListener('click',function(){ menu.reversed(!menu.reversed()) })
};

See the Pen VvzdYP by MAW (@MAW) on CodePen

 

and pls check this doc. page about .reversed() : http://greensock.com/docs/#/HTML5/GSAP/TweenMax/reversed/