Search the Community

Couple of days ago I discovered Greensock JS library. I am creating a web app with animations. So I decided to give it a try and I was surprised how smooth a movement can be. My first attempt to implement animation was jQuery animate and it was far away from smooth movement. After that I found jQuery CSS transit library which was much better than jQuery animate method, but there was still some jitter while animation. But Greensock beat all of them. I am getting very smooth movements. I understand difference between jQuery animate where object is being moved little by little until destination is reached and CSS transition where library tells the browser to move the object to particular position and browser can optimize the movement because it knows object's origin and destination. But how is this possible that Greensock has greater performance even over CSS transition? What is lying under it's performance?

I am attempting to animate opacities of several elements and experiencing some performance issues. Some preface... I'm using Snap.svg and have ported the RaphaelPlugin for Snap in my fork of GreenSock (https://github.com/anthonygreco/GreenSock-JS/blob/master/src/uncompressed/plugins/SnapPlugin.js) so generally speaking if anyone has experience with the RaphaelPlugin, any info you may have on the matter should be at least mostly relevant, though anyone with experience with GSAP may have just as valuable input. Now for the problem at hand. I have roughly 1500 different path elements on a page in which no more than 400+/- of them are animated at any one point and only animating their opacity via staggerTo shows the other simple animations choppy. The most interesting part is that the 400 or so path elements don't seem to be choppy, but the simple animation is. My first question is simple; I may have more afterward but for now.... are there any idiosyncrasies to staggerTo that I may not be aware of from a performance perspective? Eventually, I'll probably rebuild what I've done in a JSFiddle to get more specific circumstances available for assistance, but right now I'm more interested in the overall larger picture and any optimization guidelines anyone may have.

For example, I have a self-executing portion of code that creates all of the timelines and tweens I need, and then I run the .play() and .reverse() methods of the timelines in reaction to UI events. I have it stuck in my head (based on nothing in particular) that for some reason since I re-use the objects it will create no more new objects each time UI events trigger. Is this true? Am I giving up something by doing it this way and getting no performance gain? How can I performance test the difference in JS? Anyone know?

I recently started using GSAP for animating three.js as an alternative to https://github.com/sole/tween.js, commonly used for this. It made it really easy to do something like: make a cube spin and when it stops, wait until one of the faces are square (through a 90 degree rotation with repeat -1 switched on/off). However, I'm struggling with severe performance issues in tweening many objects at a time. I think this has to do with having to create a duplicate copy of the objects to store the tween data rather than just being able to directly tween object variables without having to write in onUpdate. This makes writing the tween a tad more tedious than tween.js, and it has been no easy task to convert from tween.js to GSAP. Once I finally did figure out how to do this, I found the performance was severely worse than using tween.js. I created an example modification of a three.js example which closely relates to the project I'm working on: Original, using tween.js: http://jsfiddle.net/justin_hackin/J3k9N/ (Tweening @ 292) Single variable for closure in loop, not working: http://jsfiddle.net/justin_hackin/dHLcg/ TweenMax demo: http://jsfiddle.net/justin_hackin/6bFJc/ (Tweening @ 298) I'm wondering, are these performance issues happening because each TweenMax closure is trying to store the whole object copy array ? I don't quite understand the deeper aspects of JS, excuse my ignorance. Am I doing something wrong here ? I really love these GSAP libraries so I hope I can make it work for the project I'm working on. If not, I really hope the developers will consider making the code more friendly to this kind of use. The project I'm working on might eventually be willing to invest in such a feature if it would take some efforts to implement, please let me know what could be possible. Thanks, ~Justin

Hello, I'm making a small 2D game and using (naturally) GSAP for the animation engine. So I'm Tweening a bullet by x,y and onUpdate I'm running collision detection to see if the bullet collides with any objects. However as the objects on the DOM increase onUpdate seems to be "skipping" some frames thus "lagging". Is there a better way to run somewhat complex code with TweenMax/Min? Maybe by listening on ticker? Or is onUpdate using requestAnimationFrame already? Thanks in advance!

Hello All, I am developing an app on android using phone gap. I am using timelinemax for animation. My animation is like this : one object is animating along with scroll animation. Animation works fine after scroll is completed. when both run simultaneously then object animation is poor. Is there any workaround for this ? Android Tested : 4.0 to 4.2 My second concern is that how we can achieve more smooth animation by force3D = TRUE or by Tweenmax.set(obj,{z:0.1}); ? Any help would be appreciated.

Hi, I'm looking at optimizing my code as much as possible using greensock v11 (+ starling and feathers) and Adobe Scout. I could identify the broadcast of many "progress" events as a place that takes quite a bit my iphone 4 cpu time. Since I do not add any callback to onProgress, I did expect the library to not broadcast those events. But after looking at the source code, it seems that, as I use a GroupLoader with subloaders (because I load textures atlases with .png + .xml at the same time), the GroupLoader will register listener for those events on it's childs anyway. Is there something I can do ? Thanks, Sebastien

How can I test the performance of the visitor's device on page load? So that if it does <20 FPS I can skip animations altogether I didn't find anything like this in the documentation

I've included TweenLite, the CSS plugin and the ease pack into my project via RequireJS. If I open up Chrome dev tools I can see that TweenLite is firing "Animation Frame Fired" events continuously, with each one causing a "Composite Layers" repaint. This is without executing a single tween. The memory footprint of the page sawtooths between about 5MB and 8MB inbetween the GC kicking in and my Macbook Air's fan starts to spin up! If I don't load in TweenLite and its add-ons these issues disappear. What's going on here? Is it anything to worry about? Thanks!

As a Flash Developer coming into Canvas, I'm loving GSAP. But I was amazed how slow it was just tweening the color of a EaselJS object. Experiment tweening alpha and scale: http://antoniobrandao.com/canvas/ Experiment like the above, but also tweening the "tint" of an easelJS Shape http://antoniobranda...vas/index2.html It completely destroys it!!! Am I doing it wrong or is this just slow? Check the source code in the experiments. Any help appreciated!

Hi, This is another architectural question, and relates to the starting part of the tween. In the code I'm looking at (GSAP v10), activate() and initTweenVals() is called on the first render(), and then the tween is marked as inited and not inited again. Why is activate() not done in the constructor itself? What are the implications of such a design? Would this cause errors in the tweening engine or the way its used? Yes, I understand that in the present system the tween is initialized on the next enterFrame event (ie. the frame after its created), but are there any advantages to doing it like this? What if the tween were inited on the same frame? Thanks

Hi, I've found this code inside the initTweenVals() function of GSAP v10. Why is it needed? I'm not using timeScale anywhere, but is the tweening engine using it for something? if (vars.timeScale != undefined && target.hasOwnProperty("timeScale")) { tweens[tweens.length] = new TweenInfo(target, "timeScale", target.timeScale, vars.timeScale - target.timeScale, "timeScale", false); //[object, property, start, change, name, isPlugin] } Thanks

Hi all, Currently TweenLite marks completed tweens for garbage collection by setting gc=true. This gc var is later detected by the enterFrame function and the tween is removed from the masterList array using splice. Is there any specific reason its done like this? Could this not have been done directly in the complete() function? Thanks

Hi, Just a quick question, TweenLite and TweenMax which one actually performance the better? I am a bit confused, i saw heaps example use TweenLite. But then i watched the demo on the site, TweenMax actually have better performance... Any suggestion? Cheeers Bill

Quick question here, sorry if this is answered somewhere else (couldn't find an answer). Simplified scenario... Let's say I have a div "#container" with an image inside it. Then I attach a tween to the image which rotates it infinitely. Then... using jQuery, I replace the contents of #container with a new image. Will the Tween that was attached to the original image (which is now gone) continue to eat memory, or is it now eligible for garbage collection? Do I first need to "Kill" all of its tweens before removing it? My real situation is much more complicated but that is the general idea. Thanks!

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.