javascript - Fire multiple tweens simultaneously with GSAP and TweenMax -

i want move away jquery animation have been using gsap. trying figure out how fire multiple animations on element , children. want give #navicon "720 cork" effect working fine , fade/toggle icon children of #navicon container not working @ all.

if using jquery only, have add multiple classes needed , use them trigger css3 transforms. however, gsap seems really fast.

i have read gsap docs pretty thoroughly. , see how chain tweens "timeline" not sure how fire multiple tweens on different elements based on 1 event.

here code far:

var togglemobimenu = function() {     $('#navicon').on('click touchstart', function() {         tweenmax.to($(this), 0.5, { rotationy: 720, rotationx: -720 })             .to($(this).find('#open'), 0.5, { opacity: 0 })             .to($(this).find('#closed'), 0.5, { opacity: 1 });     }); } togglemobimenu(); 

and here fiddle of same. know how tween these 3 elements @ once?

two problems in code:

• the method to of tweenmax static method returns instance of tweenmax. read more difference between static , instance methods here , language agnostic concept. since, in case, instance not have to method available as per docs, code breaks.
• second problem code using find() method find #open , #close elements inside #navicon element when clicked, per html structure, there no such things #open , #close elements. instead have #navicon-open , #navicon-close elements. putting them instead of old ones should fix that.

so in all, code should this:

var togglemobimenu = function() {     $('#navicon').on('click touchstart', function() {         tweenmax.to($(this),0.5,{rotationy:720,rotationx:-720});         tweenmax.to($(this).find('#navicon-open'),0.5,{opacity:0});         tweenmax.to($(this).find('#navicon-close'),0.5,{opacity:1});     }); } togglemobimenu(); 

but if understand correctly, trying come animation moves forward or backward i.e. toggles every time icon clicked. have reworked code in snippet below provided idea of that:

snippet:

var navicon=$('#navicon');  var naviconopen=$('#navicon-open');  var naviconclose=$('#navicon-close');  var timeline=new timelinemax({paused:true,reversed:true});  var duration=.6;  var ease=power2.easeout;  var rotation=360;  var init=function(){      timeline.to(navicon,duration,{rotationy:rotation,rotationx:-rotation,ease:ease},0);      timeline.to(naviconopen,duration,{opacity:0,ease:ease},0);      timeline.to(naviconclose,duration,{opacity:1,ease:ease},0);      navicon.on('click touchstart',function(){          togglemobilemenu();      });  };  var togglemobilemenu=function(){      timeline.reversed()?timeline.play():timeline.reverse();  };  //  init();

#navicon {  	height:45px;  	width:45px;  	border:#000 3px solid;  	border-radius:50%;  	margin:5px 35px 0 0;  	position:relative;  	float:right;  }    #navicon {  	color:#000;  	top:8px;  	left:11px;  	font-size:24px;  	position:absolute;  }    #navicon #navicon-open {  	opacity:1;  }    #navicon #navicon-close {  	opacity:0;  }

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>  <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/tweenmax.min.js"></script>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>  <a id="navicon" href="javascript:void(0);">      <i id="navicon-open" class="fa fa-bars"></i>      <i id="navicon-close" class="fa fa-times"></i>  </a>

hope helps.