Jump to content
Search Community

Controlling main thread.

twimbee test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hello, I am BRAND NEW to greensok and please bare with me. BTW I loved it at first sight.

 

I have the following pseudo code, with two functions that execute some animations let's say 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.
} 
Link to comment
Share on other sites

Hi twimbee  :),

 

Welcome to the forums.

 

You can just set up a master timeline to call the other nested timelines created in your functions like this:

function fooOne(){
  var tl = new TimelineMax();
tl
.add( minimise() )
.add( maximise() )
}

I made a quick little CodePen to show you how it would work.

See the Pen obyJEM by PointC (@PointC) on CodePen

 

For a better understanding, you should also take a look at a much more complex example. The GreenSock banner on CodePen is great study material. 

See the Pen lEiAv by GreenSock (@GreenSock) on CodePen

 

The GS home page animation also makes use of nested timelines and is very educational.

See the Pen yhEmn by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps a bit. Happy tweening.

:)

  • Like 7
Link to comment
Share on other sites

Great code examples of nested timelines Craig :D

 

To add to PointC's great advice.. You would just make different parts of your animation be different functions. And each function returns a timeline to be used in nesting them inside a main master timeline.

 

Just an example of the concept of nesting timeline functions that return their timeline within a master timeline

// child timeline - car move translate
function carMove() {

  var tl = new TimelineMax();

  // timeline tweens go here

  return tl; // returns the timeline for this function
}

// child timeline - tire rotation 
function tiresRotate() {

   var tl = new TimelineMax();

   // timeline tweens go here

   return tl; // returns the timeline for this function
}

// setup master timeline to nest child timeline
var masterTL = new TimelineMax({paused:true});

masterTL
   .add(carMove(),0)
   .add(tiresRotate(),0)
   .play();

:)

  • Like 2
Link to comment
Share on other sites

  • 2 weeks later...

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.
×
×
  • Create New...