Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Search the Community

Showing results for tags 'performance'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge


There are no results to display.

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Personal Website



Company Website



  1. Hi, I am building a complex app for iOS with long scrolling sprites. Actually, using BlitMask instead of scrollRect on a large Sprite, on iOS iPad retina it destroys performance instead of improving it. Is it expected or am I doing something wrong? Actually, the flow is as follows: - create BlitMask once enableBitmapMode() once onEnterFrame apply BlitMask.scrollY apply BlitMask.scrollX onCompleteMotion disableBitmapMode() it works as expected, interaction is restored on motion complete, but performance is horrible... goes from 40fps to 3fps... I export in GPU mode. Am I doing anything wrong? Or is it related to parsing a complex BMP in a retina display and uploading to the GPU? thank you very much Filippo
  2. I am using TweenMax to do a simple animation on slides, which looks like this: TweenMax.to(slides, 1.2, {y: (-100 * slideNum) + '%', ease: Power1.easeInOut}); I can see in google dev tools that layout is invalidated and recalculated for each update when using this function, but the translate css property should not need to recalculate the layout but only use composition. http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/ Is this a bug, a sideeffect to animation using js or just me misunderstanding the concept completely
  3. Hey Everyone, I'm working on a site that has some fairly light scroll-triggered animations(basic fade in and fade up). Everything works as expected - animations are triggered at the right time, everything looks good - except that the first time the animation is triggered, there is a slight lag/delay. It's fairly noticeable and I've tried what I can to smooth it out the first time(force3D, setting different props, etc). Everything is smooth and performant the second time the animation runs, but the first is the most important. Seems like something gets cached and allows the animation to run smoother after first time or something. Any ideas? Here's a test link. Scroll down to the 'work' section. http://sanghanco.surge.sh/
  4. Why do the test? Because like this guy(Greensock slow on mobile devices:http://greensock.com/forums/topic/7842-greensock-slow-on-mobile-devices/?hl=android#entry34635), I have a serious performance problems on mobile devices of Android,Even the ‘opacity’ animation. I searched the Forums,and readed all related topics, the given advice is basically set force3d and use of x, y,But this does not solve the problem。 Accidental circumstances I try to replace my project to CSS animations, I were found it to be smoother ,the same effect on Andriod device. I wonder whether my code has a problem?So I decided to find an example of the official, to do a test?[/b][/b][/b][/b] The official test: http://codepen.io/GreenSock/full/2a53bbbcd47df627f25ed1b74beb407d/ The Test devices and OS: iphone 6 : ios 8.4 smartisan U1 : Android 4.4.4 ASUS K00U : Android 4.2.2 The test environment: iphone6 : safari、ios webview ( in wechat ) smartisan U1 :chrome 、android webview ( in wechat ) ASUS K00U:chrome 、android webview ( in wechat ) The test result: iphone6 ------------------------------------------- safari (quantiy:300) css : 55~60fps gsap : 25~30fps test video: ----------------------------------------------------------- ios webview ( in wechat )(quantiy:300) css : 55~60fps gsap : 25~40fps test video: ----------------------------------------------------------- smartisan U1 ------------------------------------------- chrome(quantiy:300) css : 5~10fps (Although the FPS value is very low, but the fact is looks smooth,see the video) gsap : 15~20fps (Is not so smooth) test video: ----------------------------------------------------------- android webview ( in wechat )(quantiy:100) css : 60~65fps gsap : 40~45fps test video: ----------------------------------------------------------- ASUS K00U ------------------------------------------- chrome(quantiy:200) css : 7~9fps (Although the FPS value is very low, but the fact is looks smooth,see the video) gsap : 15~25fps (Is not so smooth) test video: ----------------------------------------------------------- android webview ( in wechat )(quantiy:100) css : 65fps gsap : 13~25fps test video: ----------------------------------------------------------- The PS: I am a big fan of GSAP,but I have a serious performance problems on mobile devices of Android, I hope anyone who see this topic, if you have android devices, also can test, and replay to the test results。 Of course, I more hope that the official team can test the android devices, and optimize the performance issues on android devices,thanks!
  5. I'm new to gsap. Starting to get into the code. The library looks great. When testing my animations, I noticed they looked a little different under firefox. Was using Elastic.easeOut and it was noticeably bouncier at the end under firefox. Was wondering if it's performance related. I found this greensock speed test page: https://greensock.com/js/speed.html. I selected the GSAP library. My results were as follows: Chrome (40.0.2214.111 m): ~90+fps - excellent IE (11.0.9600.17501): ~55-60fps - also extremely good FF (35.0.1): ~20-22fps - not so great My system is Win 7. I tried multiple times and the results were consistent. I have no idea if it's related to the perceivable differences in the elastic easing but the results for FF were surprisingly poor when compared to the two other browsers. I have pretty much the default settings for FF including hardware acceleration turned on. For kicks, I tried the same site on my Android phone: ~28-32fps - better than desktop FF. Do you see similar results with the latest version of FF? Is this a known issue with FF? Thanks, Peter
  6. hello, thanks for this awesome GSAP i have one question, a simple code as below var tl = new TimelineLite(); TweenMax.set($a, {autoAlpha: 0, display: 'none', top: 100}); tl.staggerTo($a, 1, {autoAlpha: 1, top: 0, display: ''}, 0.2); tl.play(); staggerFrom seem better for my code but i cant get it work, i will try again late so now i set the $a property by TweenMax first. if i set the property by css file not by TweenMax, and then play with TimelineLite, will i get the nice performance from gsap too? e.g set translate, opacity, z-index, scale etc any different between set property from css / TweenMax? which one is better? sorry for my language skill, thanks so much
  7. I am using GSAP along with a ScrollMagic plugin to time my animations using the user scroll. Everything works great on desktop, animations are smooth and look nice. But when I load the site on tablet and mobile issues start to show up. I have an iPad and a Galaxy S4, and the galaxy is performing much better than the iPad is. On scroll for the Galaxy there is a short jump at the start, past that the animations are a bit slow but work in general. When it comes to the iPad, the animations are nonexistant... on scroll everything locks up and moves for the scroll, then it seems to reload and moves everything to where they should be instantly. There is no tweening or easing happening and creates a very poor experience on tablet. Im looking for a way to improve performence on mobile / tablet and allow tweening and easing to happen at all on tablet. Thank you
  8. Hi, I am now testing my apps on 4k displays as these become more common. Using TweenLite: I am having an issue with the performance of a tween that occurs only when very high res displays are used. I am testing on 2560x1600 with the object in question spanning 2500px wide and 500px height, running on a core i7 high spec machine. The tween is simply a 0.5 second tween to alpha 0 and back again. The fade out is clearly running at around 4 to 6 frames per second. The object that is causing the performanc issue is a wood effect complex vector (as attached). With this layer removed from the animated object performance is perfect. I tried making the vector more simple and using optimise, with some very small improvement but nothng significant. In fact I tried making the vector 6X more complex and it was a little slower but not 6x as much. Anyone any ideas on how to improve this. Thanks Complex_vector.zip
  9. First of all let me thank you for your awesome loading features, what i mostly liked about them is that you can define loaders in an XML file, great job. Now to the important part. I just found out about Adobe Scout and decided to give it a try to tune my App and I found something quite weird that nearly doubled my memory use. The problem is that when i tried to decompress a loaded bitmapData with the getPixel(0,0) technique, two things used memory, Bitmap DisplayObjects and BitmapData, both used 20.480 KB. Why Bitmap DisplayObjects used memory? I thought that only BitmapData should have used memory, the Bitmap DisplayObjects was later garbage collected, but why is it being created in the first place.... So i tried using getPixel(0,0) on a clone of the bitmapData i loaded and Bitmap DisplayObjects never appeared. Is the Bitmap DisplayObjects memory being used by the ContentDisplay object that comes with the loader? If so, what can i do to prevent this from happening?
  10. Back in the Flash days, animating a bitmap or sprite would yield better fps/performance than a movieclip. I'm curious if this translates to JavaScript as well. For example, do you get better performance animating an img directly vs animating a div that contains an img? Both anecdotal and technical replies would be greatly appreciated. Thanks!
  11. I'm developing a slider with parallax effect, using TimelineMax. And it's joy ride with GSAP ! But, my intention was to deploy using node-webkit, and I'm getting quite inconsistent performance results. In the codepen I show just the basics, next and previous buttons and you should be able to swipe left and right. (Have to add much more, later, more content on each slide, probably dragging (with Draggable) and make it an infinite slider thing...) As for now, sometimes it just works beautifully, others, it's just a bit jerky, mostly at animations end, when slowing down. I've tried different easings, tried to thin the KBs of images, force3D: true, etc... Only thing is I get a better result, but still not allways smooth, if just open the page in chrome, instead of using node-webkit. I'm about to go back to Flash CC, AIR and Actionscript, (the animation code would virtually be the same) but I'd really like to do this in javascript and HTML5. wondering wether I'm getting hardware acceleration I tried chrome://gpu inside node-webkit, I get the same as just in chrome: Graphics Feature Status Canvas: Hardware accelerated Flash: Hardware accelerated Flash Stage3D: Hardware accelerated Flash Stage3D Baseline profile: Hardware accelerated Compositing: Hardware accelerated Rasterization: Software only, hardware acceleration unavailable Threaded Rasterization: Disabled Video Decode: Software only, hardware acceleration unavailable Video Encode: Hardware accelerated WebGL: Hardware accelerated Driver Bug Workaroundsclear_uniforms_before_first_program_use exit_on_context_lost texsubimage2d_faster_than_teximage2d Problems Detected Accelerated video decode interferes with GPU sandbox on certain AMD drivers: 298968 Disabled Features: accelerated_video_decode Additional GPU rasterization whitelist for field trial: 380694 Disabled Features: gpu_rasterization_field_trial Whitelist for using GPU rasterization for a broader set of content: 399306 Disabled Features: gpu_rasterization_expanded_heuristics GPU rasterization is blacklisted on non-Android: 362779 Disabled Features: gpu_rasterization Some drivers are unable to reset the D3D device in the GPU process sandbox Applied Workarounds: exit_on_context_lost TexSubImage2D() is faster for full uploads on ANGLE Applied Workarounds: texsubimage2d_faster_than_teximage2d Clear uniforms before first program use on all platforms: 124764, 349137 Applied Workarounds: clear_uniforms_before_first_program_use Threaded rasterization has not been enabled or is not supported by the current system. Disabled Features: threaded_rasterization It's a 16 GB RAM machine with a GTX 770 card, but the inconsistency has appeared almost identical on other machines with less resources, so I'm guessing it might not be a hardware issue ? Any ideas ?
  12. Hi there, I'm playing with the TweenMax API and I encounter some difficulties. I aim to animate a full svg. I use a basic Tween for test puprose TweenMax.to($('#' + 'front_side_down'), 1, { opacity: 1, display: 'inline' }) When the SVG does not contain much nodes, it runs smoothly and nicely. But when I hit more than 1000 groups node of svg path the animation got choppy. I wonder why it influence anything, as in any case we only target one element... Any help would be much appreciate ! Thanks ! P.S : I'm talking about a 3.5mo SVG file
  13. Up to this point I have animated everything as a DOM element, but I always want to push the performance of my game more and more, so I have started to look closer at canvas. I am curious about what kind of performance gain I can expect from animating a cached javascript element vs an element on a canvas. Any resources, insights, or experiences on this topic would be greatly appreciated.
  14. Hi, I'm developing a site that is getting results from twitter and showing one tweet at a time, it loads an iFrame of the tweet rendered by twitter via oEmbed. The tweet drops in to the center from 0 opacity to 1 then after a moment drops down out of the window fading out. The app is performing great with a few items but it seems to be chugging a little as that number grows. I know I could remove the older tweet items after they finish their tweens however the client wants to have this timeline running at a conference lasting 30 mins for each speaker, still not an issue til the request to be able to replay the 30 min timeline at a faster speed with timeScale so the speaker can view the audience reaction(it's also tweening a css gradient BG and playing sounds based on the hashtags(variety of feelings) of the active tweet being tweened). If I remove the items I'm a little concerned about playing back in this fast forward mode and being able to load the tweet iFrames again fast enough. Any ideas?
  15. 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?
  16. 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.
  17. 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?
  18. 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
  19. 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!
  20. 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.
  21. 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
  22. 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
  23. 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!
  24. 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!
  25. 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