Need help with an animation | It is shaking to much


(Dennis van Leeuwen) #1

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.
728x090_banner_wnk_rgb_rz3.zip (81.5 KB)


(Dennis van Leeuwen) #2

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

The Browser transition:
http://forums.tumult.com:/uploads/db2156/original/2X/8/8d371915679e24ea002f5221b3bf953c97513ce7.mp4

The Hype transition:
http://forums.tumult.com:/uploads/db2156/original/2X/2/2567ea9fc48bd7b76c92aabafc19d2c0b3a04779.mp4


(Trey Yancy) #3

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


(Dennis van Leeuwen) #4

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.


#5

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: https://tumult.com/support/examples/8409-temp/728x090_banner_wnk_rgb_rz3.html


(Dennis van Leeuwen) #6

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


#7

ew. Hope that helps!


(Dennis van Leeuwen) #8

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:


(Jonathan Deutsch) #9

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.