Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Pusher

Greensock Menu

Recommended Posts

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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/

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×