Maxime
Members-
Posts
15 -
Joined
-
Last visited
Maxime's Achievements
2
Reputation
1
Community Answers
-
I arrived to manage what I need with a simple delayedCall. For those who are interested check the documentation.
-
No, the sleep function of the Pen is just to demonstrate the problem.
-
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: http://codepen.io/magister/pen/GgrRae
-
Yes, I'm on Mac osx Chrome. In the full page mode I still have canceled request at a certain time. Strange.
-
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.
-
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 ?
-
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!
-
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() ??
-
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?
-
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: http://codepen.io/jamiejefferson/pen/aJcGl 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.
-
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: http://codepen.io/anon/pen/dkugc 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.
-
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...
-
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.