onStart not firing on empty TimelineMax

[erikb]

Came across a snag -- an empty TimelineMax does not fire its onStart events, but does fire its onComplete events.

 

In contrast to this  example:

See the Pen eZPGrb by jedierikb (@jedierikb) on CodePen

 

Is this a bug?  It seems like it might be.  

 

(I am dynamically making tweens based on incoming data, hence the perhaps odd discovery )

See the Pen EKdwoJ by jedierikb (@jedierikb) on CodePen

[Carl]

Regarding the empty timeline, I imagine Jack will chime in with more specifics, but I believe it can be argued that it never started. It doesn't have a duration or any child tweens. However, perhaps it completes based soley on the fact that the root timeline passed over the point in time where the complete callback should be fired.

 

Then again it might be a bug. I think its tough to really say what one should expect when dealing with an animation that has no duration.

 

To get the results you want, for now you could just add a callback at time(0) like:

 

var tm = new TimelineMax({
  onComplete: completeThing
});


tm.call(startThing)

[GreenSock]

I can see valid arguments on both sides. Ultimately I do lean slightly toward making onStart fire in this case. If anyone disagrees, please chime in. I've made that update in the 1.18.5 preview which you can check (uncompressed) here: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/TweenMax-latest-beta.js Better? 

[erikb]

Thanks for this patch.  I will be able to test it next week.

[erikb]

I can see valid arguments on both sides. Ultimately I do lean slightly toward making onStart fire in this case. If anyone disagrees, please chime in. I've made that update in the 1.18.5 preview which you can check (uncompressed) here: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/TweenMax-latest-beta.js Better? 

 

Looks good.  Thanks.

See the Pen pyYXQa by jedierikb (@jedierikb) on CodePen

[jonForum]

On 4/29/2016 at 3:36 AM, GreenSock said:

I can see valid arguments on both sides. Ultimately I do lean slightly toward making onStart fire in this case. If anyone disagrees, please chime in. I've made that update in the 1.18.5 preview which you can check (uncompressed) here: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/TweenMax-latest-beta.js Better? 

see not work anymore ! why?

See the Pen jOXpLWj?editors=1111 by djmisterjon (@djmisterjon) on CodePen

 

[GreenSock]

1 hour ago, jonForum said:

see not work anymore ! why?

From the docs: 

Quote

A function to call when the animation begins (when its time changes from 0 to some other value which can happen more than once if the tween is restarted multiple times).

Your timeline is completely empty, so its playhead can't move past 0. 

[jonForum]

2 hours ago, GreenSock said:

From the docs: 

Your timeline is completely empty, so its playhead can't move past 0. 

it work here !?

See the Pen pyYXQa by jedierikb (@jedierikb) on CodePen

 

[jonForum]

2 hours ago, GreenSock said:

From the docs: 

Your timeline is completely empty, so its playhead can't move past 0. 

Have you considered the possibility of adding a callback named "onStarting," ?, somewhat like a car with a starter:

• "onStarting": the car isn't yet started but initiates its startup sequence (Always fired , also if tl is empty).
• "onStart": the car is started (doesn't start if the timeline is empty). (fired only >0 )

I find that managing a scenario in which you want to dynamically add tweens to the timeline based on certain conditions is quite complex and hard.
If all conditions are false, then the timeline will be empty, but we lose coherence because we can't fully use the callback structure correctly.

[GreenSock]

4 hours ago, jonForum said:

it work here !?

That's a very old version and I'd consider that a bug that has been fixed since then. That behavior isn't consistent with the description in the docs. 

 

3 hours ago, jonForum said:

I find that managing a scenario in which you want to dynamically add tweens to the timeline based on certain conditions is quite complex and hard.

That should be quite simple, actually - you could just add a .set() call at 0.001 into the timeline that sorta "props it open" in a sense:

.set({}, {}, 0.001);

Or you could add the onStart itself as a callback instead at 0.001: 

gsap.timeline({
  onComplete: () => console.log( 'onComplete' ),
}).add(() => console.log( 'onStart' ), 0.001)

See the Pen YzdjEjV?editors=0010 by GreenSock (@GreenSock) on CodePen

[jonForum]

7 hours ago, GreenSock said:

That's a very old version and I'd consider that a bug that has been fixed since then. That behavior isn't consistent with the description in the docs. 

 

That should be quite simple, actually - you could just add a .set() call at 0.001 into the timeline that sorta "props it open" in a sense:

.set({}, {}, 0.001);

Or you could add the onStart itself as a callback instead at 0.001: 

gsap.timeline({
  onComplete: () => console.log( 'onComplete' ),
}).add(() => console.log( 'onStart' ), 0.001)

 

 

Yeah, I just found it a bit unfortunate to have to separate the two callbacks in the code flow.
It makes the reading less concise and coherent.
I'll see if with your suggestions, I can refine the readability a bit more.
Thanks for your time.


 

[GreenSock]

5 hours ago, jonForum said:

Yeah, I just found it a bit unfortunate to have to separate the two callbacks in the code flow.
It makes the reading less concise and coherent.

I gave you a way to keep the callback where you had it: 

gsap.timeline({
  onStart: ( ) => console.log( '1' ),
  onComplete: () => console.log( '2' ),
}).set({}, {}, 0.001);

 

[jonForum]

2 hours ago, GreenSock said:

I gave you a way to keep the callback where you had it: 

gsap.timeline({
  onStart: ( ) => console.log( '1' ),
  onComplete: () => console.log( '2' ),
}).set({}, {}, 0.001);

ho i understand thanks , yes it look better !