Alexander Halser

Thank you both for your replies! I came up with a function to monitor fps during the animation, very much like the solution that OSUblake posted in the other thread. Reducing fps gradually and stretching the animation duration with timeScale() at the same time works pretty well for me. I didn't know that some games run constantly at 30fps. But it makes sense, that's still relatively smooth. A change to HTML5 canvas is the last resort for me. For what I am doing (animating HTML formatted text and images and some very simple inline SVGs), doing that with canvas is a tough challenge. Some first speed tests with pixi.js did show an advantage, but not significant enough. Regarding SVG: I mean really simple SVGs like a <svg><rect></rect></svg>. Does anyone know of speed/rendering comparisons between simple shapes drawn with SVGs and standard <div> tags? For simplicity, all my shapes are inline SVGs, but for rectangles and ellipses, a <div> could be used as well. Does it make a difference to the browsers?

I am doing some fairly complex animations with TweenLite, that - in some cases - cause even a desktop browser to slow down considerably and animations become choppy. After playing with TweenLite.ticker.useRAF and TweenLite.ticker.fps I found a managable solution by reducing the framerate and increasing the duration of the animation. The resulting animation is much slower, but still smooth (which is what I want). Question: what's the best way to find out whether an animation is going to be choppy? I have implemented an onComplete function that compares the time it took to complete with the supposed duration. It just doesn't really help, because every animation is different and once the framerate is down and the duration multiplier up, both values will not be reset ever, even if a different animation allows for higher speed at a better framerate. What's more, the animation that triggers the downgrade, has been choppy already... I would like to start every animation at default speed and framerate and while it is being processed, monitor the real speed and adjust framerate and total duration as neccessary to make it smooth. How would I do that?