promise TimeLine with pause and resume promise

[jonForum]

What best way to make complexe text callBack (story) inside a time line ?

 

currently this not work fine !

plz see :  function txt0() { line:6

See the Pen BaarKLL?editors=0011 by djmisterjon (@djmisterjon) on CodePen

 

 

if you look console, it should show 0,1,2 ! but it seem buggy here.

 

Are you able to show some versions on how to use that kind of stuff correctly ?

I need a clean way because it a very complex system events managers.

See the Pen BaarKLL by djmisterjon (@djmisterjon) on CodePen

[ZachSaucier]

Hey jon.

 

This sort of thing is actually very easy in GSAP 3 which we are hoping to release in the next week or so. I think you're going to love it! Shockingly Green and Business Green Club GreenSock members already have access to the beta.

 

You can read about how to do this in GSAP 2 in this thread: 

 

[jonForum]

hey hum interesting, hope to test if you made a good `Deprecation Warning:` tracking for v2tov3, because gsap are really deep integrate in my engine.
 

For the example upper, am sorry i know how use promise, maybe i explain myself bad, i just don't understand why the console here show `0,2,1`
In my logic , the `pause` and `resume` should make the console show `0,1,2` ! ?
i also try with `tl.pause()` and same behavior.
 

[ZachSaucier]

4 minutes ago, jonForum said:

For the example upper, am sorry i know how use promise, maybe i explain myself bad, i just don't understand why the console here show `0,2,1`
In my logic , the `pause` and `resume` should make the console show `0,1,2` ! ?
i also try with `tl.pause()` and same behavior.

You can completely remove your setTimeout and see that the console shows 0,2 with the pause left in there.

 

From the timeline's perspective, both the callbacks are placed at the 0 second mark (because there's no duration). So it runs them both when the timeline is played. The reason '+=0.1' works is because you're telling the timeline to wait to play the second one. So the pause() comes in and prevents that one from being reached.

 

Does that make sense?

[jonForum]

ho ok i see, yes thanks.
I would have thought that without time marker, the callBack uses an automatic hierarchy and dont crush, according to their input, and the pause() make a similar behavior to a breakPoint.

So i will probably use `+=0.001` for make easly events managing inside the timeLine.

did you think it a good way ? can i have issue if i setup my events text engine like thats ?

this way can allow me to easily change order if i need, it a good thing.
 

        function txt0() {
            const tl = new TimelineMax();
            tl.addCallback(() => {
                tl.pause();
                $txt(id).then((value) => {tl.resume() }); //call a txt event id
            },'+=0.001');
            tl.addCallback(() => {
                tl.pause();
                $txt(id).then((value) => {tl.resume() }); //call a txt event id
            },'+=0.001');
            tl.addCallback(() => {
                tl.pause();
                $txt(id).then((value) => {tl.resume() }); //call a txt event id
            },'+=0.001');
            // .... more
            return tl;
        };

If you think you have a better cool way tell me.

[ZachSaucier]

Maybe it would help if you described your desired outcome. I don't know why you're using a timeline for this at all. It seems like you just want to use promises. How is the timeline related?

[jonForum]

I made you a fast screenRec to show you the current logic and user case, it hard to explain with my english.
But it very important to me to do it in the best way before going too far in my events messages managers and *%$# my brain if i made a big mistake with your timeLine engine.

The logic here, is example i call a events
This event call Actions in game with your tween engine, and it also allow me to call another tween with message events.
When message is end or the message choice is end, the promise return en continue next message or next action if need.
So this should allow me to easily manage what happened in each events.

Hope this screenRec can help you understand how i use your engine for my events.
You can see near 0:37, when the timeLine debbuger reach end, it the current line upper you can see in action.
I use confirm  just for the test because my message engine are no finish yet, but it the same thing if i call a message with promise.

 

[ZachSaucier]

Very interesting visual style! I like it. Thanks for sharing the video, it helps in us understanding your goal.

 

I think your way of doing it would work. 

 

I think I would approach it in a different way, creating one promise for all of the function calls. Something like this:

function txt0() {
  const tl = gsap.timeline();
  tl.pause();
  
  var showMessages = () => {
    $txt(id).then((value) => {
      $txt(id).then((value) => {
        $txt(id)
      })
    })
  };
  showMessages().then((value) => {tl.resume() });
  
  return tl;
};

That way there's no risk of something firing out of order (race conflict). You could create a helper function so that you don't have to nest it like that.

 

That's exactly what GSAP 3's pipe utility does actually. To give you a preview of GSAP 3, here's what it would look like:

function txt0() {
  const tl = gsap.timeline();
  tl.pause();
  
  var showMessages = gsap.utils.pipe(
    () => $txt(id), 
    () => $txt(id), 
    () => $txt(id)
  );
  showMessages().then((value) => {tl.resume() });
  
  return tl;
};

 

[jonForum]

ho **** , gsap.utils.pipe look very interesting and clean.
I think i will put this in standby and wait a beta of gsap3 integration.
 

the multiple imbrication codes upper

  $txt(id).then((value) => {
      $txt(id).then((value) => {
		$txt(id).then((value) => {
			$txt(id).then((value) => {
				//.....

it a thing i would like to avoid
But the pipe look very interesting, i think i can wait and see.
thanks you guys for made awesome stuff like that !

[jonForum]

did you already release a doc to start study ?
https://greensock.com/docs/v3
seem not work.

[ZachSaucier]

3 minutes ago, jonForum said:

did you already release a doc to start study ?
https://greensock.com/docs/v3
seem not work.

Currently the v3 docs are only available to Shockingly Green and Business Green members. When GSAP 3 is released the docs will be viewable to you!

[OSUblake]

For the pause thing, I think you might be looking for addPause.

https://greensock.com/docs/v2/TimelineMax/addPause()

 

For the promise stuff, I think it could be done much better. If you need stuff to run sequentially, just do this.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await

 

async function doStuff() {

  await $txt(id);
  await $txt(id);
  await $txt(id);
  await $txt(id);
  await $txt(id);
  await $txt(id);
  await $txt(id);
}

 

Demo using await.

 

See the Pen dvdoze by osublake (@osublake) on CodePen