Michael71

Recently wrote down an article/tutorial about simple animation of SVG graphics and SVG injection. I really believe that with the retina displays and the need for high quality graphics is going to give a boost to SVG rendering and manipulation. You can check my blog post here: http://nightlycoding.com/index.php/2012/10/animating-properties-of-injected-svg-elements-with-tweenmax/

Very impressive, I'm mostly interested for the timeline element what did you use to make it, any library that you linked with greensock? If you don't mind sharing. Thanks in advance!

Thanks Carl, even though PreloadJS is still in early version and could use some extra functions its still a great tool for loading dynamic images and keeping track of progress.

Well I'm trying to animate a DOM element that will also contain text, the text should be "readable" when throwing/tweening it along with its background. I wouldn't mind giving the plugin version a try, I was a former Club Greensock member until 2-3 months ago, but I'll probably signup again with all these stuff happening here.

Basically I'm trying to create a drag and release kind of effect, something like the throw props used to do in AS3. I'm thinking it might be possible with easing but not sure it would be as smooth or tweening properly when someone is scolling/clicking and dragging. Do you think something like this could be done in such a way? Or if someone has some idea I would be happy to hear it. Thanks again.

Hello there, I was wondering if the Throw Props plugin is something that is coming soon, I believe its one of the most useful plugins as it allows quite many applications. Would really love to see something like this on Javascript for our "mobile content creating urges"... Keep up the good work, the lib is amazing so far.

I managed to transform the scrolling background(s) into canvas animations, the result its much smoother animation and less CPU load mainly because of the requestAnimationFrame function. However it occupied 200 lines of code instead of 2(!) with greensock engine. I guess we are still in the flux that we need to combine technologies and elements to achieve maximum performance, I'm only hoping that one day we will be able to code javascipt to handle the "heavy lifting" and let mark up languages simply describe the elements.

For me its "throw points in the engine and draw lines along the path". Btw that thing about controlling the curviness I think its amazing to have. Thanks and waiting patiently for this and throwProps.

For a slideshow, even idvidual declarations of TweenLite/Max would also be straightforward to implement $("#next).live("click",function(){ var imgContainer = $("#imgContainer"); TweenLite.to(imgContainer, 1.0, {css:{'left':'-=200'}}); }); // 200 is the width of your container or something // same thing applies for previous button and add some logic

I did somewhat what you suggested, yes the rendering impoved quite abit and animations look smoother, but it still runs at 8-9% of the cpu, but there is impovement certainly. Now I wonder how can I achieve better performance and still the same effect...

Hello, I was wondering on the performance of the GSAP engine and what would be the optimum declarations for some simple scenarios. I have created a little game that animates 3 images (of 1500px) with repeat -1 Creates some images and animates them from side to side (1500px) momentarily rotates an image With these "simple" tasks the cpu is working 10-12% and the animations don't look so smooth. I'm not using TimelineMax/Lite but TweenMax instead for all of these So I was wondering if this is a wrong technique. Moreover all of the animations are using the CSSPlugin because I want to animate left, top, rotate is there another way to do it or the css animations are optimal for these tasks? I'm using the latest Chrome. Here is some sample code. This handles the paralax effect: var tween1 = TweenMax.to($("#child1"),speed*4,{css:{left:lefty1-1500},repeatDelay:0,useFrames:false, repeat:-1,ease:Linear.easeNone}); var tweenMountains = TweenMax.to($("#mountains"),speed*2,{css:{left:-1500},repeatDelay:0,useFrames:false,repeat:-1,ease:Linear.easeNone}); var tweenBuildings = TweenMax.to($("#buildings"),speed,{css:{left:-1500},repeatDelay:0,useFrames:false,repeat:-1,ease:Linear.easeNone}); This handles the creation of items and removal upon ending the effect: $("#mainContainer").append("<div class='mines' id='mine"+counter+"' style='top:"+randomY+"px;'><img src='mine.png'/></div>"); TweenMax.to($("#mine"+counter),speed,{css:{'left':-100},ease:Linear.easeNone,onComplete:function(id){ var _counter = counter; test = id; id.remove(); },onCompleteParams:[$("#mainContainer>#mine"+counter)]}); So appart from some input of the performance issue, It would be great if you had any methods of measuring the FPS of the animations (total, or one by one). You can view the total application here: http://www.netgfx.com/trunk/mission51 Thanks in advance.

Thanks for the support, I also think that the CD lib I used doesn't really do a good job or I should do what you propose. The bird animation was made with fireworks from a sprite sheet (learned how to do that last week ) Ultimately I think its really easy to animate stuff now, and it gives us a much wanted "freedom".

I completed a series of tests and examples and I created a very simple game that uses TweenMax as its animation core. I believe some things should be more smooth (99% has something to do with my code). Let me know what do you think. (Animation or coding wize). feel free to use the code as you like. http://netgfx.com/trunk/birdbreak/

Oh thats awesome piece of info, thanks I'll be sure to try them out.

Hello, I was wondering if someone had any success of animating a set of images (known also as sprite sheets). I was thinking that animating the css property background-position, and maybe adding some autoAlpha would do the trick. I will probably try and implement something of sorts unless someone has already beaten me to it, so there is no need to re-invent the wheel... looking forward for reading some ideas on the matter... EDIT: Something quick and dirty is the following: var t1 = new TimelineMax({delay:0, repeat:-1, repeatDelay:0}); t1.to($("#spriteContainer"),0.0,{css:{'background-position-x':posX}},0.1); t1.to($("#spriteContainer"),0.0,{css:{'background-position-x':(posX-50)}},0.2); t1.to($("#spriteContainer"),0.0,{css:{'background-position-x':(posX-100)}},0.3); } we have a <div id="spriteContainer"></div> and some css: #spriteContainer{ background:url(fishSprite.png); background-repeat:no-repeat; position:absolute; left:50%; top:200px; width:38px; height:26px; overflow:hidden; } I used this sprite sheet:

I figured that the JQuery position report was giving me (not what I expected), and therefore I rotated the actual image and not the parent div, and I only increased/decreased the top of the parent. This however might (I have not seen any decrease in performance) lead to more computing, so I will try the relative tween value as you suggested. Thanks for the help...again.

Thanks Jack this visibility/display tip was very helpful (I think flex displayView handles things the same way).

Hello, I have the following code: $(document).live('keydown',function(event){ var key = event.keyCode; if(key==39){ TweenMax.to($("#hero"),0.1,{css:{'left':$("#hero").position().left+40}}); } else if(key==37){ TweenMax.to($("#hero"),0.1,{css:{'left':$("#hero").position().left-40}}); } else if(key==38){ TweenMax.to($("#hero"),0.3,{css:{'rotation':-30}}); TweenMax.to($("#hero"),0.1,{css:{'top':$("#hero").position().top-10}}); TweenMax.to($("#hero"),0.6,{css:{'rotation':0}}); } else if(key==40){ TweenMax.to($("#hero"),0.1,{css:{'top':$("#hero").position().top+10,'rotation':30},onComplete:function(){ TweenMax.to($("#hero"),0.1,{css:{'rotation':0}}); }}); } }); What this does is to read the "arrow" keys from the keyboard and move the element (hero) up/down/left/right However when pressing the down button continually, the element goes up instead of down, it does not do that when there is no rotation however. For some reason rotating the object gives it wrong .position().top value. It used to mess up moving upwards too, but I solved it by resetting the rotation to 0 after the animation (still its a workaround though). Anyone knows why is this happening? Or how it could be solved/worked around? You can view this here: http://www.netgfx.com/trunk/scrollingBG/ Thanks in advance.

I'm not deliberately trying to slow down the effect, I guess the only thing slowing it down is when it reaches the end of the duration. The "staggering" is obvious in the page i posted, it is happening as the effect is restarting. Maybe the easing does play a big role in this indeed. What I'm trying to achieve is to be able to slow down the scrolling or make it go very fast, but the problem is that the movement is not linear when it restarts. I will definitely try the easing parameter (which is 99% what is wrong). I'll post the results in any case. EDIT: Well the ease:Linear.easeNone did work, and up until duration of 2'' the animation is perfect, over 2'' sometimes it "lags" a bit. I'm trying with latest Chrome and my CPU is pretty good. Is there something that I can declare differently to achieve maximum smoothness? (even if it means adding more or less images to animate).

Hello, I have been performing some tests with the new v12 engine, its quite awesome really. So I'm trying to create an infinite scrolling background effect. I have a repeatable background divided in 3 divs and I'm animating all of them at the same time, whilst resetting their position and repeating. $("#button").live('click',function(){ TweenMax.to($("#child1"),10,{css:{left:$("#child1").position().left-1500},repeatDelay:0,useFrames:true, repeat:-1,onComplete:function(){ var left = $("#child1").position().left; console.log('has gone to: '+left); if(left<0){ $("#child1").css({'left':1500}); } }}); TweenMax.to($("#child2"),10,{css:{left:$("#child2").position().left-1500}, repeatDelay:0, useFrames:true,repeat:-1,onComplete:function(){ var left = $("#child2").position().left; console.log('has gone to: '+left); if(left<0){ $("#child2").css({'left':1500}); } }}); TweenMax.to($("#child3"),10,{css:{left:$("#child3").position().left-1500},repeatDelay:0, useFrames:true,repeat:-1, onComplete:function(){ var left = $("#child3").position().left; console.log('has gone to: '+left); if(left<0){ $("#child3").css({'left':1500}); } }}); }); When the animation plays at 0.1 speed the effect is smooth but quite fast. When I try to slow down the effect it staggers at each repeat. Also tried with TimelineMax/Lite same thing, tried with useFrames:true, slightly better but above delay:12 it staggers again. Am I doing something wrong or anyone has any idea how can I tottaly control the playspeed and have a smooth animation? you can view this here: http://netgfx.com/trunk/scrollingBG/ Thanks in advance.