Skip to main content
clevermill.com
Inspiring
December 17, 2018
Answered

How to rid animation stutter on images?

  • December 17, 2018
  • 3 replies
  • 2586 views

I'm having unacceptable stuttering problems with animated images.

300x600a – Bad stuttering:

Watch and see the stuttering.  It's especially bad as the 3rd image comes to a rest.

300x600b – Fixed-ish, but via a poor technique:

Watch and see that the stuttering is mostly gone.   I did this by changing the scale of the photos from 100% to 100.1%.   While this trick fixes the stuttering, we're left with a slightly fuzzy photo and displeased clients.

Download files here.

Before suggestions are made that I need to replace the createjs.Ticker code with the RAF_SYNCHED code.   I've already done that.  (See the find/replace below if you're unfamiliar with this as it will improve your animations.)

If a contest was held titled "Who Creates the Smoothest Animation", Animate's canvas animations will lose to animations made by hand-coded, GSAP or GoogleWebDesigner.  My guess is because those don't use createjs or canvas?

Stuttering has long been an issue in Animate and I think it should be addressed.

Thanks to anyone who can help!

----------------------

FIND

stage.addChild(exportRoot);

  createjs.Ticker.setFPS(lib.properties.fps);

REPLACE

stage.addChild(exportRoot);

  createjs.Ticker.timingMode = createjs.Ticker.RAF_SYNCHED;

  createjs.Ticker.setFPS(lib.properties.fps);

This topic has been closed for replies.
Correct answer ClayUUID

Let me guess, you're testing in Chrome? The "stuttering" isn't a problem with Animate—the problem is that you're moving the bitmap less than one pixel per frame at the end of your tweens. In this situation it's up to the browser whether or not they use subpixel positioning. Chrome, under some conditions, isn't doing that.

728991 - imageSmoothing doesn't kick on drawImage(img, float, float) - chromium - Monorail

In IE, Edge, and Firefox, both versions of your animation look fine. It even animates perfectly smoothy in Chrome if you zoom in a bit.

3 replies

Asymetrical
Community Expert
December 21, 2018

For what it's worth, I'm using Chrome and I see zero stuttering. It feels nice and smooth. Could it be your graphics card?

clevermill.com
Inspiring
December 21, 2018

I think ClayUUID is on the right path here.

I'm using Chrome and that's where I see the stuttering.  Firefox and Safari look good.

I guess I'll be posting this on the Chrome support forum.

ClayUUIDCorrect answer
Brainiac
December 17, 2018

Let me guess, you're testing in Chrome? The "stuttering" isn't a problem with Animate—the problem is that you're moving the bitmap less than one pixel per frame at the end of your tweens. In this situation it's up to the browser whether or not they use subpixel positioning. Chrome, under some conditions, isn't doing that.

728991 - imageSmoothing doesn't kick on drawImage(img, float, float) - chromium - Monorail

In IE, Edge, and Firefox, both versions of your animation look fine. It even animates perfectly smoothy in Chrome if you zoom in a bit.

kglad
Community Expert
December 17, 2018

increase your frame rate.

clevermill.com
Inspiring
December 19, 2018

I'm making a banner ad and the they try to limit you to 30fps.

Brainiac
December 19, 2018

As I just explained, boosting FPS wouldn't help. The problem is your browser only doing integer pixel positioning.