Rendering Problem: add() and addCallback() are pausing the execution of the timeline

[Maxime]

tl.to($obj, speed, { 
 y: '40'
});

tl.addLabel('label');

tl.addCallback(function() {	
 playSound();
}, 'label+=.15');

tl.addCallback(function() {	
 playSound();
}, 'label+=.25');

For me, the timeline WAIT the execution of call()/addCallback().

 

Can someone explain me why the timeline is paused (or not rendered) when I use add() and addCallback()?

 

The best would be to have a running timeline (not disturbed by callbacks).

 

Using a timeline is give the possibility to insert small function at the right place without doing the non maintainable way with setTimeout({}, 200)..

 

Attempt: Wrap the callback function in a setTimeout(playSound, 0). Not working

 

Pen: 

See the Pen GgrRae by magister (@magister) on CodePen

[jamiejefferson]

Javascript is single threaded (without using Web Workers) so you can't do 2 things simultaneously. If playSound is taking a long time then GSAP has to wait for the single thread to get back to it. What is in your playSound function that's taking so long? I hope it's not that sleep function from the Codepen...

[Maxime]

No, the sleep function of the Pen is just to demonstrate the problem. 

[jamiejefferson]

Ok, so what's in playSound then? It will block all other JavaScript execution (including GSAP) until it's completed. add() and addCallback() aren't pausing the timeline, it's playSound that is taking too long (too many loops perhaps?).
 
This isn't a GSAP specific issue by the way - all JavaScript is single threaded. There's not a lot more we can say about a function we know nothing about.

[Maxime]

I arrived to manage what I need with a simple delayedCall. 

For those who are interested check the documentation.