Difference between adobe animate preview and browser preview

[M Brouwer]

Hi all,

As a motion grapher who works in AE, I am kind of new into Adobe Animate CC and I've been figuring out how to create html5 banners..

Now after some figuring out how, designing, trial and error, I created a nice little square banner for online use with a button that actually works, pretty sweet

I've created a magnifying glass thats animated over the banner, first kinda small, so it just reveals small parts of the banner, at the end, it zooms out so the whole thing is revealed. I did the revealing with a mask; created a shape the size of the glass and it follows the exact same path as the magnifying layer.

This all worked fine. Untill I want to ease ease the keyframes.

As soon as I ease ease, the layers offset a bit. Not in Adobe Animate (preview shows exactly what I want) but if offsets when I preview in the browser. (final HTML file as well)

I cant figure out why this happens and it's really frustrating that I can't find the solution... I really hope anybody has a clue

I can post screen shots if necessary

[Joseph Labrecque]

Can you post an image of what you are seeing? Canvas rendering does do some strange things to the edges of vector content. That might be what you are seeing.

[M Brouwer]

Thanks for the quick reply As you can see the first picture is the canvas in animate, looks good to me. 2nd picture is in the browser, there you can see the mask in the glass has a different speed, the path it follows is correct but somehow it seems that the ease isnt the same. (I've checked many times, tried it over, made the animation again from the start etc)

[Joseph Labrecque]

Darn. This doesn't look like the problem I was expecting.

So if you move the glass and it lags - if you hold still after does it catch up?

[M Brouwer]

It does catch up at the end. I just reopened the file to try and work on it with a bit of a fresh mind, and after deleting the easein/ease out, it works great. So I must be doing something wrong with the easing

[M Brouwer]

So now I did ease in ease out squint on the fourth, sixth and eight keyframe and I kept the rest without easing. The ones without easing the mask and the glass come together and look fine, then the ones with the easein/ease out are messed up.

This is really strange if you ask me

[GoryGreg]

Is it a browser issue? Is that Firefox you are trying in? If so try it in Chrome etc. Firefox has a bit of display problem for dynamic text. If it happens on all browsers then ignore this. If it is only Firefox I can then post the fix for you to try.

[albertd9194959]

If you enable cpu throttling does the sync get worse ?

With html animations when you export the file it converts the animation into a series of tweenJS's.

So the values might not be converting exactly the same, one layer might have an Ease.getPowIn(2.2) and on your other layer Ease.getPowIn(2.3) for example....or it might be a delay between code triggers.

[M Brouwer]

https://forums.adobe.com/people/Gory+Greg  schreef
Is it a browser issue? Is that Firefox you are trying in? If so try it in Chrome etc. Firefox has a bit of display problem for dynamic text. If it happens on all browsers then ignore this. If it is only Firefox I can then post the fix for you to try.

I also tried it in Chrome, same result   (not to ignore, good to know that different browsers are tried)

albertd9194959  schreef

If you enable cpu throttling does the sync get worse ?

With html animations when you export the file it converts the animation into a series of tweenJS's.

So the values might not be converting exactly the same, one layer might have an Ease.getPowIn(2.2) and on your other layer Ease.getPowIn(2.3) for example....or it might be a delay between code triggers.

I have no idea how to enable cpu throttling so I'd have to figure that out first. But to me it still doesn't make sense why it works without ease but not with ease, then again that delay between code triggers could be the problem...

[Mohanaraj]

Hi -

I have set you a PM and would really appreciate if you could take a look and respond back.

Thanks!

Mohan

[M Brouwer · Accepted solution]

In case someone is interested; Mohanaraj gave me a workaround - call it what you want - it works so I'm happy.

I've converted the eased keyframes to Frame-by-Frame Animation > Keyframe each frame. This worked.

Thanks everyone for helping. If they find out what the actual problem is/was, I'll post it down below