dynamically pause/freeze a function that calls a timeline animation function

[katerlouis]

I have an animation, lets call it "Dumbo", that is needed frequently but irregularly.

 

So I am in the middle of a user interaction / deep in a function, we call it "Frankie", and depending on some circumstances I want to trigger Dumbo.

 

But now I need Frankie to wait for Dumbo to end. 

 

So, clever Frankie thought to pause Dumbo immediately on call, asks of his duration and puts the rest of his own doings in a setTimeout.

 

But I don't want to slice up Frankies entrails into pieces where Dumbo and his friends might occur at some time–

 

 

Is there a way to freeze the rest of Frankie without additional nesting?

Something like jQuerys delay() perhaps?

 

[PointC]

Hi kreativzirkel 

 

I'm not sure I followed that scenario correctly, but you can certainly pause a timeline if/when a second one starts. You can then call another function with onComplete when the second one ends. That function can restart the first timeline, trigger a new animation etc. 

 

https://greensock.com/docs/#/HTML5/Animation/TweenMax/

 

I think you'll find that almost anything is possible with a bit of planning and creativity. It's hard to give you specific answers without a demo of the question. If you could put together a CodePen demo, we can get you the best answers. It doesn't have to be anything fancy - just a few divs and tweens to demonstrate the problem/question.

 

https://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

Thanks and happy tweening.

[OSUblake]

It's really hard to understand what you're trying to do without a demo. It sounds like this could all be done with callbacks or a promise. If execution order matters, using a timeout is not a good idea. Promises are nice because you chain calls, and there are several promise helpers for GSAP like this one.

[katerlouis]

Argh; and I thought the sweet names would make it easier.

I will make a demo during the day, although this is a general question–

 

It looks like I have no other choice then to split up the insides of Frankie in multiple functions and call them seperately..

Bummer–

 

(Deadline is close; I'll get back to you guys with more details)

[Jonathan]

Funny scenario kreativzirkel and welcome to the GreenSock Forum

 

Me personally would opt for using a promise like Blake advised. But just for the sake since you asked about delay.

 

GSAP has a method called delayedCall() .. which is the GSAP equivalent of setTimeout()

 

https://greensock.com/docs/#/HTML5/GSAP/TweenMax/delayedCall/

 

Provides a simple way to call a function after a set amount of time (or frames). You can optionally pass any number of parameters to the function too.

//calls myFunction after 1 second and passes 2 parameters:
TweenMax.delayedCall(1, myFunction, ["param1", "param2"]);

function myFunction(param1, param2) {
    //do stuff
}

[katerlouis]

All solutions require wrapping the different steps, which is what I'm trying to avoid.

I think what I ask for is just plain impossible.

// My dream!
var a = 1;

someStuff();

if (a == 1) {
    fancyAnimation();
    delay(fancyAnimation().pause().totalDuration()); // or better on the timelines onComplete event
}

someMoreStuff("that is executed delayed");

And unfortunately I couldn't grasp "what all the fuzz is about" with promises.

 

I don't see where the gsap.then() function excels the eventCallback onComplete.

[OSUblake]

If you only have 1 function to execute, then using a promise over a callback may not seem that useful. But if Frankie's entrails are all over the place, a promise is nice because you can chain function calls together, just like a timeline. Otherwise, you'd have to nest callbacks inside of other callbacks, which can get messy.

fancyAnimation
  .then(findEntrails)
  .then(performSurgery)
  .then(holdCandlelightVigil);

Even without a promise, I think what want is doable using just a callback, but a demo goes a long way in giving you better answer. 

.