如何使用greensock JavaScript库控制主线程？

Question

I have the following pseudo code, with two functions that execute some animations using to() method, namely minimise() and maximise(). Now when I call them from another function for example fooOne() what happens is that the main thread rushes in the minimise() function, starts the timeline animations then quickly returns to fooOne() and jumps into maximise() where it too starts the timeline animations. Now what I am getting is the animations in minimise() and maximise() running almost concurrently, how can I go about and only execute maximise after minimise finished?

I can do this with jQuery but I couldn't find any documentations or posts about this topic on the internet.

Regards.

function fooOne(){
   minimise() ;
   maximise() ;
}

function fooTwo(){
   maximise() ;
}

function fooThree(){
   minimise() ;
}

function minimise(){
   var timeline = new TimelineLite();
   timeline.to(........);
   timeline.to(........);
   // loads more animations below.
}

function maximise(){
   var timeline = new TimelineLite();
   timeline.to(........);
   timeline.to(........);
   // loads more animations below.
}

Answer 1

Sidenote: you're mixing up the terms a bit - 'multithreading' has a little different meaning in the programming world and has to do with being able to execute multiple processes at the same time. Javascript is by design single-threaded (apart from web workers), so it is not applicable here. (You might want to remove the multithreading tag).

As for your question: TimelineLite has a nice way to handle this - from your 'minimise' and 'maximise' functions you can return the newly created timelines and add them together inside the 'fooOne' function:

function fooOne(){
   var mainTimeline = new TimelineLite();
   mainTimeline.add(minimise());
   mainTimeline.add(maximise());
}

function fooTwo(){
   maximise() ;
}

function fooThree(){
   minimise() ;
}

function minimise(){
   var timeline = new TimelineLite();
   timeline.to(........);
   timeline.to(........);
   // loads more animations below.

   return timeline;
}

function maximise(){
   var timeline = new TimelineLite();
   timeline.to(........);
   timeline.to(........);
   // loads more animations below.

   return timeline;
}

Calling 'add' on a timeline will by default append tweens/timelines at the end. This is a great way to split complex animations into simpler ones.

Sample codepen: http://codepen.io/anon/pen/JGBEYj

Also take a look at the documentation for details: http://greensock.com/docs/#/HTML5/GSAP/TimelineLite/add/