Animation stutter in Chrome

[theinteresthunter]

I’ve created a lot of animated ads with Adobe Animate CC (using EaselJS/CreateJS) and have been disappointed with the stutter playback on Chrome. (I'm using 66.0.3359.181. My clients see the same issue too, but I don't know what browser they're using.)

I imagine you're aware of the issue. To enable you brilliant people to help solve this problem, I’ve created a simple version of the issue. Here, I have 3 cat images that animate from left to right. The images are only 300x250px and about 28k each.

I’m trying to solve the specific problem of getting rid of the stutter/jerkiness that happens as the images travel from left to right. Do you have any suggestions?

It works pretty smoothly in Safari and Firefox. Chrome shows significant stutter.

See Version A - Made with Animate CC
Stutters heavily in Chrome

See Version B - Made with Google Web Designer (GWD).
Smooth as butter in Chrome. No issues.
I realize Version B is not a fair comparison to Version A since GWD isn’t using canvas or createjs.

Download the files.

Any thoughts? I've also posted this issue here in Adobe Animate CC's forum.

[sebastianderossi]

I am unable to run Version B in Chrome

Failed to load resource: net::ERR_BLOCKED_BY_CLIENT
(index):73 Uncaught ReferenceError: Enabler is not defined
    at HTMLElement.f.attachedCallback ((index):73)
(index):78 Uncaught ReferenceError: Enabler is not defined
    at HTMLElement.f.initAd ((index):78)
    at (index):132

[sebastianderossi]

Also the .zip link seems broken. I am getting a 404 error.

[theinteresthunter]

Try this one: Version B2.
(Made for non-DoubleClick ad environment.)

[sebastianderossi]

No errors but unfortunately no images displayed.

[sebastianderossi]

@theinteresthunter Testing on Chrome Version 67.0.3396.62 (Official Build) (64-bit) Version A doesn't appear to be "jerky" Have you tried using version 1.0.0?

[MannyC]

Not jerky for me either Version 67.0.3396.62 (Official Build) (64-bit) Linux

[theinteresthunter]

@sebastianderossi I've corrected the zip download link.
Also, I added a Version A3 above that uses CreateJS version 1.0.0.

[sebastianderossi]

@theinteresthunter I downloaded your latest source. 300x250a_animate is still pointing to an older version of the combined libs. I have updated the source to v1.0.0 and changed the timing mode to RAF. Have a look at the results (Left: original export, Middle:GWD, Right: Updated version). So I wouldn't say anything is wrong with the export per se, I would say that the frequency of rendering might be different. Switching from using framerate to requestAnimationFrame does make a difference

createjs.Ticker.timingMode = createjs.Ticker.RAF;

In this mode, Ticker passes through the requestAnimationFrame heartbeat, ignoring the target framerate completely. Because requestAnimationFrame frequency is not deterministic, any content using this mode should be time based.

[CoIin]

I was testing this in the forum, and the jerkiness is subtle on my Mac, but Safari is clearly smoother. I dare say that Javascript in general runs faster in Safari, and maybe it's for Google to improve the performance of Chrome.

I'm curious about RAF, when applied to animations done in Adobe Animate, so I'll give that a try. I'm working on something that plays well on iPhone but poorly on Android, maybe RAF will help there.

[gskinner]

Regarding RAF, you can also use createjs.Ticker.RAF_SYNCHED. This will attempt to preserve your framerate while using requestAnimationFrame. It works best if your target framerate divides neatly into 60 (ex. 15, 20, 30).

Another option is to use the framerate property on MovieClip to synch the MC playback to time. The AdHelper.timeSync method demonstrates a (slightly hacky) way to apply this logic to all of your MovieClip instances.

https://github.com/CreateJS/html5ads/blob/acc307901503f2ac61511d94ab96a6191d315904/AdHelper/AdHelper.js#L274

[CoIin]

Which of these options ends up skipping frames? One worry is that if you have code on keyframes that it might get skipped. Like, if you have this.stop(); at the end of an intro animation. If that was skipped the animation would run through whatever was next in the timeline.