Jump to content
Search Community

TimeLine with pause and resume promise

jonForum test
Moderator Tag

Recommended Posts

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.
eLjAQ5RK_o.png

 

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

Link to comment
Share on other sites

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: 

 

Link to comment
Share on other sites

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.
 

Link to comment
Share on other sites

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?

  • Thanks 1
Link to comment
Share on other sites

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. :)

Link to comment
Share on other sites

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.

 

Link to comment
Share on other sites

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

 

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;
};

 

  • Like 1
Link to comment
Share on other sites

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 !

Link to comment
Share on other sites

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

 

  • Like 2
Link to comment
Share on other sites

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...