Search the Community

Hi, Is there a special / approved way of measuring animation performance on the client? I would like to measure if the animation has lagged vs specified duration, or if greensock was being clever under the hood and skipped frames to optimise the animation. Currently I'm using a onComplete call within gsap.to to print the end of animation time, and comparing that to a time from just before the animation was called. This way I'd be able to turn off animation effects automatically across the site based on some initial test, for slower performance devices. One extreme edge case was when I opened a web app in a virtualised macOS machine that did not have GPU passthrough, so simple transform animations would freeze the entire machine. Would avoid having these problems by running a small transform animation test for a few ms duration to see how it performed, then decide on the animations for rest of site. EDIT: The timestamping method doesn't work well for performance measurement - testing shows the elapsed ms from before gsap.to() to onComplete call could be less than the duration specified in gsap.to(). EDIT2: For anyone having the same experiment with a virtualised machine for dev environment, the guest OS / Safari doesn't freeze or drop frames as per the fps measuring function given by Jack below. It's likely about how VMware renders the graphical output of the guest OS back to you on the host OS that freezes / drop frames.

I'm getting towards the end of a project, and started wondering about performance and improving the overall quality of the animations I'm making. In the example pen, I have a few questions. 1. Does using x, y improve the animations over using top, bottom, left, right? In a video by Paul Irish it looks like using translate for CSS animations is performs better, especially in more complicated examples, is this similar with GSAP? Looking at the GSAP tests, this seems different, though. I'm not sure if my eyes deceive me, but I do see a bit of a "staircase" effect on the letters. 2. How would you use x and y translates with staggerFrom + letters wrapped in spans? I'm not sure I understand using x and y properly - when I add to the spans of the letters in the example, it doesn't work. 3. Will lowering the ticker's call time help with performance? While Tweens may not be as smooth, will the browser use less resources if set to something like: TweenLite.ticker.fps(30);

I am working on a HTML application which runs in an embedded device. There is a GSAP animation using TweenLite. For performance improvement I would like to do some tweaks in the frame per second of the animation. For a smooth animation, I need a fps(40) and as soon as the animation is complete, I would like to change the fps to fps(0). TweenLite.to($(element), 0, { scale: 0.95, opacity: 0, onStart: function () { TweenLite.ticker.fps(40); }, onComplete: function () { $(element).css("transform", "none"); done(); TweenLite.ticker.fps(0); } }); But the animation is always taking fps(0). onStart TweenLite.ticker.fps(40); is not working. In stead of onStart, I also tried it as below. TweenLite.ticker.fps(40); TweenLite.to($(element), 0, { scale: 0.95, opacity: 0, onComplete: function () { $(element).css("transform", "none"); done(); TweenLite.ticker.fps(0); } }); Anyone have some idea regarding this? Thanks in advance!

Dear GSAP comrades, Why do I get for some HOSTED DrawSVG animations from codepen 1 FPS when using CHROME on Mobile? They work fully FINE ON FF but just not on CHROME! How can this be? Only on Codepen it runs also well on mobile. Can someone solve me the riddle? Thanks for any suggestions, Mat

If I create a new Timeline set to use frames for timing eg. var tl = new TimelineMax({ useFrames: true }); How do I set the frame rate of the timeline? The only example I can find is for setting the frame rate is for a tween, rather than a timeline, and the ticker property doesn't exist for a timeline. TweenLite.ticker.fps(60); I am migrating some flash animations to JS and I need a frame rate of 50. is it possible to set a frame rate for the whole timeline? Thanks.

staging.mkeballet.org Hello GSAP crew. I've got a site here that does full page xPercent tweens(inspired by the answer to my previous question - thanks Blake), coupled with drawing an SVG path, and a few other things. On mouse wheel, a function called goNext() or goPrev() fires. Within those functions are the individual functions that kick off the parts of the cover transition - drawing the circle forward/backward, transforming the text in and out, and sliding the cover xPercent in and out. Everything is going great, on at least the user facing side, even on retina screens. Except when you make the screen larger than an average laptop. On larger screens, the cover images are of course larger. And when they "clip" in and out, the red circle path chugs as it draws. If you inspect the sources, you'll find the JS file in js/custom/mkeballet.js. I've minified the irrelevant sections, and tried to comment what the relevant hunks do. The goNext() function is where things come together for this example. So in summary, my question is do you see anything about the way I'm organizing/writing my GSAP code that is counter-intuitive, or am I just trying to do too much that jank is inevitable? I've been here https://developers.google.com/web/tools/chrome-devtools/memory-problems/?hl=en But I'm not that good at memory monitoring yet so I haven't been able to discern anything useful yet. Thank you!

Hey guys, I just started using GSAP and so far I am very impressed. I am running into some performance issues though, so I could really use some help! I am working on creating a web application that is kind of like a guitar hero for piano. I need the application to be able to animate a bunch of rectangles downward at a constant rate (each rectangle represents a note in a song). I am running into some performance issues though, since a song can contain thousands of individual notes. I have created a codepen that demonstrates what I am talking about. There is a stutter once and a while that I cannot stand. Here is a link to the codepen http://codepen.io/MicahHauge/pen/EyJjGA?editors=0011 Let me know if you see a better way of doing this that will prevent the stutter. Thanks, Micah Hauge

Hello, First of all, thanks for the great work and I (but I belive I speak in the name of the community) thank you for all your hard work that you guys have put on your beautiful product. I've successfully used TweenMax in past projects in different scenarios (animations, hover effects, games on dom, canvas, svg), but for my current one, I think I might need some extra help . To explain the issue I'm having, first I need to walk you through my environment: I am basically building a slideshow animation on canvas using TweenMax and createjs (to be more specific only the easel.js lib). Everything works fine, except that at some point the tweens are jerky. In my app, the browser is doing other things in parallel with the animations and - as expected - this has an impact on the framerate. From time to time the fps drops from 60 to 20-30 and after that it goes back up to 60. I know that the frame drop is mainly caused by the other things that my app is computing, but of course the effect is more visible on less powerful devices. The problem is also described in the codepen attached (which is obviously exaggerated in order to point out the evident). Unfortunately, I can't totally separate the logic from the animation and I need to run many things in parallel, so changing the architecture isn't a solution for my problem. From my research and try-outs, none of the cool stuff you guys are offering is a real candidate as a solution to my problem, and so far I've tried numerous combinations of ticker and animation settings (raf, no raf, different fps speeds, lagSmoothing and lazy rendering). After some more research and digging on the net, I'm starting to think that the problem is that I'm approaching the animations like a movieclip: I have a strict duration of time in witch I must go from point A to point B, while I should be approaching them more like a game: moving one step at a time, recalculating positions, velocities and other factors that influence the position of my items on each loop (in our case Timeline.ticker tick event). In game development, in order to ensure maximum fps while having other important (and probably CPU intensive) logic computed (such as collision detection or multiplayer sync), the most common approach is to implement a fixed time step loop (there are many other useful articles on this on the web, but this was one that explained the solution more clearly). I guess that the basic idea is to decouple the logic from the rendering process and try to predict when the next render will occur in order to approximate the position better. This approach seems to be working for most loop-based games (although not too many of them are written in javascript). I myself tried to implement this approach using my current architecture but failed and in order to not rewrite everything from scratch, I looked into implementing this kind of solution in the gsap animation engine. While I (clearly) don't know what I'm doing, it seems that this kind of implementation can be either implemented in the core Animation object (as an extra option, just like lagSmoothing) or as a plugin. The latter is more convenient, but from my understanding, plugins are targeting animations and specific parameters, while I would want to be more generic and target a timeline of tweens, not a specific property. Now that you've had the patience to read my lines, my questions for you are: Do you consider that having a fixed time step loop solution might fix my problem? Do you have any other suggestion that might help me solve my issue? Can the solution I presented be implemented as a plugin (if yes... could you provide some basic steps?) Have anyone else (because I couldn't find anyone else) suggested this approach for gsap? I look forward to your answer, because I really want to make this work with gsap and not to have to rewrite all my animation engine from scratch. Thanks, Gion

I was wondering if anyone could help me with an issue involving TweenMax and Easeljs. We're nearing completion of a game built in EaselJS, and just in the device testing phase. We're finding on some lower end devices, such as the iPhone 4 (iOS7), that whenever the framerate drops from our standard of 24 to around 18 or less, any TweenMax tweens currently running will appear to run at an incredibly low framerate compared to anything else. Other non-tweened movements will continue as you would expect at the framerate drop, but we'll only see as little as three frames in any one TweenMax tween - the start properties, maybe one or two frames somewhere in the middle, and eventually the end properties applied to the object, and that's about it. Very odd. It makes it look like the game is struggling much more than it actually is, as everything not tweened is often running at a reasonable rate. Originally we added an event listener to TweenMax's ticker, telling it to update the canvas on tick but this resulted in a lot of performance issues, as it was trying to update the canvas more often than it needed to. So now we just update the canvas on the EaselJS ticker update. I've since tried setting the TweenMax ticker's fps property to whatever the current easel framerate is, and this is adjusted each frame. This generally improves the animation speed of the tweens quite a bit, but they're still not updating as smoothly as any other animations we have playing on screen during these slightly more intensive moments. The canvas is continuing to update fine, so it seems to be that TweenMax isn't updating the values as frequently as it should be. Does anyone have any idea what might be happening? Is there a relatively easy way to manually update the progress of the tweens, so that the canvas ticker and the TweenMax ticker can be properly synced? Thank you

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