How to solve stutter in Chrome browser?

[clevermill.com]

I’ve created a lot of animated ads and have been disappointed in the stutter playback on Chrome.

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 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.

Thanks for any insight.

[Colin Holgate]

Your timeline looks ok, but you could try Quad EaseOut instead of Classic Ease, and No Ease for the last fade. My hope is that EaselJS can handle those better.

Although it's called Quad EaseOut, you get to it by selected Ease Out first, then double-click on Quad.

[clevermill.com]

The type of ease seems to make no difference.

See Version A2 with Quad EaseOut implemented.   Just as stuttery.

[Colin Holgate]

If you have a GItHub account it could be worth raising an issue directly with the CreateJS team:

GitHub - CreateJS/EaselJS: The Easel Javascript library provides a full, hierarchical display list, ...

Of course, they could fix it and it may take some time to be integrated into Animate. So, logging a bug with Adobe would be worthwhile, they can be the ones to talk to the CreateJS team:

Feature Request/Bug Report Form

The bug reporting system doesn't seem to allow attaching files, so include some of your short url links.

[clevermill.com]

I posted the issue on GitHub for the CreateJS team.

See it here.

Thanks for the suggestion.

[Colin Holgate]

Check back already, there are some suggestions.

[albertd9194959]

Hi Clevermill,

Have you looked through this ? Take note the use of tickers, and requestAnimationFrame.

Step-By-Step HTML5 Ad Creation With Adobe Animate CC | Adobe Blog

Types of ease as well as tween type are all exported as code and controlled with EaselJS. You will only have performance issues on low end systems due to the relationship of the animation interpolation, fps and stage update calls.

Regards,

[Colin Holgate · Accepted solution]

The tweens in the animation are just the preset ones, that translate to a short EaselJS line of code. They're not Motion tweens and they're not custom in any way. So, it should perform ok. The main question is why is it smooth in Safari but not smooth in Chrome?

BTW, I tested RAF on something I'm doing, and it may have helped my slow test Android phone, but it doesn't completely fix things. That may make sense on a 60 fps timeline though, maybe I'll change the fps to 30, which will make it less smooth on iPhone, but give Android more of a chance to keep up.

[Grant Chambers]

Do you want the sinister answer?

Google wants complete control of its Ad network i.e. no third party bits and bob’s. Flash (.swf) was the first to be targeted - Apple did the same thing to the (.swf) for the same reasons - greed and control.

This is not a create.JS issue or an Animate CC issue. This is a Chrome browser issue. Chrome developers can fix this issue, but they have chosen not too. The issue has been around for over two years. I brought this stutter to their attention way back, but nothing.

The reason GWD works is because it’s a Google tool. Animate CC is not and therefore a third party competitor, which is ironic because Google developers basically used Animate CC  (15 years of development) to model GWD.

Anyway the fix is simple! Google needs to stop trying to dominate everything and get its Chrome developers to address the incompatibility with createJS .

FF, Edge, IE, Safari all work fine.

Designers will consider dropping Animate CC and using GWD if these kind of issue are not resolvable. Clients don’t want to see stutter (Google’s master plan) I for one will never leave Animate CC, it can do things GWD cannot. The banners I develop  and the techniques implemented simply cannot be done in GWD - Beta software people! You are submitting work to your blue chip clients using beta software?

The sad truth is resistance is futile Google will dominate the online Ad world in the near future. No one can stop this. Even platforms like Celtra, Sizmek will crumble. We live in world of trillion dollar super giants and the regulators have been blindsided by the rapid growth of these companies - they are too big and cannot be held to account - futures bleek people.

My current real-world work around is this:
If a clients storyboard requires image panning I attempt to offer them something better, different approach. If they insist I use GWD. The only time I use GWD is to resolve a “chrome issue” makes you think!

[Colin Holgate]

Something worth checking out is the new features in Animate CC 2019. With that you could either keep the animation as Canvas and see if the new texture atlas feature helps, or you could use one of the four WebGL document types.

If you could post the FLA of your test I could give it a try.