Adjusting the speed/duration of animations dynamically?

[Alexander Halser]

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?

[Carl]

GSAP has some built-in mechanisms to adjust for lag on-the-fly.

Take a look at the videos and info on lagSmoothing() here: https://greensock.com/gsap-1-12-0

 

If you still have questions or problems, let us know.

 

Unfortunately, there is really only so much you can do to make things look nice while you are hammering the processor.

[OSUblake]

Somebody touched on monitoring performance in this post...

 

 

 

But if performance is a problem, you probably need to change what you're animating. If you're messing with SVG or HTML, you should look into using canvas or WebGL.

 

And taking a page from game development, there's a reason some games are capped at 30fps. Animations will appear smoother running at a constant 30fps over a framerate that is constantly changing.

 

[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?

[OSUblake]

6 minutes ago, Alexander Halser said:

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?

 

If you're talking about animating transforms, like x and y, HTML is faster. But keep in mind that you can animate SVG the same way by animating the root SVG element or by using an SVG as the source for an image, and animate the image element. SVG performance starts to drop off when you animate elements inside the actual SVG.