Need help with an animation | It is shaking to much

Hello everyone,

I am at the end of my possibilities. The costumer is getting angry and is questioning why it is so hard for me to make such a small animation so poorly. :frowning:

so my problem is the following. I have an short animation. Where an Image grows in size and keeps its position steady. But the steady part results in shaking. In Size or Scale options, the same thing. I moved around in the Tween options, but no good. If I go below 600ms it is not that visible. But that is not what the costumer wants.

It is making me nuts. I cannot cancel this job in the final state. Does anyone have clue to smoothen this animation?

Here is the banner I am working on. (81.5 KB)

I will add some videos, showing my finding and problem. It is too shacky.

The Browser transition:

The Hype transition:

I’m not seeing any shaking in Firefox or Safari. This isn’t an issue with sceen reesolution or refresh rate, is it?

No, I’ve checked this animation on a HD and 4K Monitor. Same thing and in Chrome, Safari, Firefox (+developer), Vivaldi, Opera, IE and Edge. It just keeps jumping around. It doesn’t do that in Hype itself.

I recommend using these settings which should perform better (it is the default):

This utilizes transforms instead of CSS top / left animations.

Here’s how that performs:


Nice will give that a try once I a back behind my mac. - written from a pc. :slight_smile:

ew. Hope that helps!

Yes problem fixed. Now Dennis wants to know why. What is the difference.

And I could kiss you for this little help. But the love of your life may do it for me. :slight_smile:

1 Like

There’s a specific issue that can also make IE 11+ and Edge look shakey; a workaround is to add a Z rotation of 1deg. There will be a fix in the next major release of Hype.