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.


Comments

Post a Comment

Popular posts from this blog

powershell Start-Process exit code -1073741502 when used with Credential from a windows service environment -

i'm running strange behavior powershell start-process call. here call: $process = start-process ` "c:\somepath\mybinary.exe" ` -passthru ` -credential $defaultcredential ` -wait ` -workingdirectory "c:\somepath" ` -loaduserprofile if ($process.exitcode -ne 0) { #do } this call return exit code - 1073741502 . after quick search, exit code seems related generic error when program not load required dll (aka. status_dll_init_failed ). when run without -credential $credential program runs correctly. in order isolate problem, manually launched some.exe in prompt target credential , runs smoothly. so problem seems come way start-process cmdlet launch process. i found potential solutions problem tried apply no luck : link , link . would have idea of what's going on here ? edit 1: run proc mon monitoring program activities when launched directly or via powershell script. problem seems occur when loading kernelbase
Read more

twig - Using Twigbridge in a Laravel 5.1 Package -

i'm trying create laravel 5.1 package uses twigbridge instead of .php views. can normal .php views display fine, when try make use of .twig templates i'm met error. possible use twigbridge templates when creating views laravel package or pretty stuck blade , php ? edit 1: loading twig template without extending works. it's when start using {% extends 'file' %} error comes out. i error error loading /virtual/laravel/packages/username/mypackage/src/views/sample.twig: template "templates.master" not defined () in "/virtual/laravel/packages/username/mypackage/src/views/sample.twig" @ line 1. my folders username |_ mypackage |_ src |_ controllers - samplecontroller.php |_ views |_ templates - master.twig - sample.twig twig template sample.twig {% extends 'templates.master' %} {% block content %} {{ parent()
Read more

c# - LINQ join Entities from HashSet's, Join vs Dictionary vs HashSet performance -

i have hashset's each stores t, have written test application compares different relation algorithms can think of, i'm not pleased results getting. does there exist more efficient ways of achieving object relations, once testing? using system; using system.collections.generic; using system.linq; using system.text; using system.threading.tasks; using system.diagnostics; namespace linqtests { class program { static void main(string[] args) { hashset<user> usertable = new hashset<user>(); hashset<userproperty> userpropertytable = new hashset<userproperty>(); #region lets create dummy data. console.writeline("please wait while creating dummy data, can take while..."); console.writeline(""); int rows = 1000000; for(int x = 0; x < rows; x++) { random rnd = new random(); // ad
Read more