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

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

For those who are interested check the documentation.

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

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

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

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

[Animation in canvas]

Yes, I'm on Mac osx Chrome.

In the full page mode I still have canceled request at a certain time.

Strange.

[Animation in canvas]

It's not a server problem.

 

I have no idea why after a certain moment, the browser (Chrome/Safari) decide to load a new image instead of setting replacing the current one by the cached one...

 

Here is the codepen : http://codepen.io/magister/details/sGAym

 

If there is no solution for this I did the DOM replacement way... with .replaceChild()

 

This problem doesn't exist on Firefox.

 

[Animation in canvas]

Hi everyone,

 

Changing the src attribute of image works well when the image element have the exact same size as the new image.

 

I have the following problem:

(After an initial preload)

 

When I set a retina image src (60x/second) twice bigger but resized by the CSS, the animation make a new HTTP request for this image. In other words, every frames creates new HTTP request.

 

My server + browser are overloaded...

 

Why setting an url of an image of 332x312 into the following tag create extra HTTP request?

<img style="width:166px; height:156px;" width="332" height="312" src="/images/ipad_2x/symbols/id_009@2x.png">

No extra http request when:

<img style="width:166px; height:156px;" width="166" height="156" src="/images/ipad_1x/symbols/id_009.png">

I already set a maxAge of 1 year for the assets server side

express.static('/images',{ maxAge: oneYear}));

Should I consider, deleting the DOM image and replacing with a new element ?

[TimeLine add() append() vs on Complete performance]

Note for people who going to read this later:

 

It took me 4hours to rewrite my onComplete callback pyramid...

The code is now cleaner, flexible and better performance.

 

Thank you Carl!

[TimeLine add() append() vs on Complete performance]

There is any performance difference between creating a series of Tweens linked each other with onComplete functions.

 

Or creating one TimeLine and adding callback logic and Tweens with the functions, add(), append(), addCallback()

 

??

[Animation in canvas]

Yes roundProps is the solution. Thank you very much. This helps!

 

I have a small problem: the update Handler is too fast.

I need to run a 30fps animation.

 

I run it as follow:

var fps          = 30,
		currentFrame = 0,
		totalFrames  = 25,
		$img          = $("#myImage");

	
	var anim = {frame:0};
	TweenMax.to(anim , totalFrames/fps, {frame:"+="+totalFrames, roundProps:"frame", onUpdate:updateHandler, repeat: 1 });

	function updateHandler() {
		var frameNum = anim.frame;
		console.log('set ',anim.frame);
		$img[0].src = "./img/test/ace_0" + (frameNum < 10 ? "0" : "") + frameNum + ".png";
	}

It try to set too many times the same image:

Output this:

set  0 - repeat 1

set  1 - repeat 1

set  2 - repeat 2

set  3 - repeat 2

set  4 - repeat 1

set  5 - repeat 3

set  6 - repeat 1

set  7 - repeat 1

set  8 - repeat 3

set  9 - repeat 3

set  10 - repeat 1

set  11 - repeat 1

2set  12 - repeat 1

set  13 - repeat 1

set  14 - repeat 1

set  15 - repeat 1

set  16 - repeat 11x

2set  17 - repeat 11x

set  18 - repeat 11x

set  19 - repeat 11x

set  20 - repeat 11x

2set  21 - repeat 11x

set  22 - repeat 11x

set  23 - repeat 11x

2set  24 - repeat 11x

set  25 - repeat 11x

 

 

I think my timing is not right : totalTime =  totalFrames/fps

Or some delays somewhere?

[Animation in canvas]

Thank for your answers. It's useful ressources.

I try to achieve the complete animation like this : http://forums.greensock.com/topic/6338-animating-and-controlling-image-sequence/#entry22958

 

BUT, into one single Tween: which I can play(), pause() exactly like this: 

See the Pen aJcGl by jamiejefferson (@jamiejefferson) on CodePen

 

But for performance (DOM manipulations) into my game, I can't insert 60-80 images elements per animations (example:2).

So the example 1 is interesting but I need to rewrite at 30 fps into one single Tween. Here I need your help.

[Animation in canvas]

Does anybody know/example with animating an image sequence (not a sprite image) into a canvas element.

I would like to use the power of TimeLine in order to control the Tween (pause, stat, stop)

 

It exists an example with image elements: 

See the Pen dkugc by anon (@anon) on CodePen

The main idea is here http://stackoverflow.com/questions/22411994/preloading-image-sequence-on-html5-canvas

 

But I would like in a canvas element

 

Thanks for your ideas.

[Tweenlite doesn't get jquery object]

GREAT complicated explanation.
Many thanks.

[Tweenlite doesn't get jquery object]

Perfect, {y: ...} works perfectly 

[Tweenlite doesn't get jquery object]

Good to know thank you.

 

But, it doesn't solve my problem : the css property transform of my list did not changed 

 

I should see the css transform property of the ul changed...

[Tweenlite doesn't get jquery object]

Why Tweenlite does'nt apply to ul:{jquery object, filled} the transformation in this case :

TweenLite.set(ul, {css:{transform: 'translateY(-4000px)'}});

But this work as it should be with TweenLite:

ul.css('margin-top', '-4000px');

JSfiddle description : JSfiddle

I use the latest version of TweenJs.

Thanks for your help.