.PNG is shaking in animation, cannot figure out why

Hey I have a fairly simple animation two layers of the same .PNG cross animate to make it look like a hospital monitor that is changing as a blip line goes along. This is my 4th one of these and none had any problems, but this one… Line 1 shakes like crazy. http://www.dragonfly-design.net/kf/ped-m4/

Any ideas as to what is going on? Thanks.

Can you attach a Hype document?

The file is attached. I recreated it and it wasn’t doing it until I clicked 100% Scale and it did it again, the old ones didn’t have scale turned on with them, but they all need to scale to the size of the iFrame that they will eventually live in.

any idea why it’s doing that?

There are a few things at play which is causing the vibration. The root of the issue is you have two competing animations - the group moving forward and the element moving backwards. You’ve set the amount of movement (600px) to be the same and are using linear transitions for both, which is good. However, the zoom factor of the scale is probably causing a fractional rounding issue and there might be a couple other things at play. The easiest way to generally resolve it would be to:

  • Set the animation duration to be 5 seconds instead of 5.15. This makes the math cleaner so it is more likely to land on whole numbers - (600px / (5s * 60fps) = 2px per frame exactly).
  • Uncheck ‘Position with CSS left/top’ in the document inspector. This allows non integral rendering so any small differences aren’t as likely to be noticed.

However, given your animation the better way would probably be to simply put the image in a group with overflow set to hidden, and then expand the group so the image is uncovered.

Thank you so much for looking into this! I don’t think I ever would have guessed that combination. I really appreciate you solving the issue. Now I know to watch out for this. I couldn’t get the mask to resize, only move, when I resized it chaos prevailed.

1 Like