How to rid animation stutter on images?

[clevermill.com]

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);

[kglad]

increase your frame rate.

[clevermill.com]

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

[ClayUUID]

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

[kglad]

(i saw a significant improvement in chrome by increasing the frame rate, though that won't help the op much.)

[ClayUUID]

How would increasing the number of times per second that Chrome isn't updating the image position improve anything?

[ClayUUID · Accepted solution]

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.

[Asymetrical]

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]

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.