Image blurred when animated

Animation
1

Hi,
We noticed that on Chrome and Safari (on a non-retina display), an animated image can be randomly blurred, whereas is remains sharp when not animated.
When checking ‘Position with CSS left/top’, it stays sharp but the motion becomes jagged.
Do you have a workaround for this ?
We have included the example Hype document and a preview.
Thanks for your help,
Teo

test_blur_motion.hype.zip (49.3 KB)

1 Like
2

This is actually desirable. Professional software to do title crawls usually give the option of blurring the type as it seems less jerky. Ideally, it should have a motion blur in the direction of travel.

3

Hi Joe
Thank you for your reply, which I could accept if:

  1. the blurring occurred only during the movement and stopped once the image stays still (it is not the case)
  2. the blurring was not random (see an alternative example of my test Hype doc showing no blurring on the same image)

test_blur_motion2.hype.zip (48.5 KB)

1 Like
4

There’s something else going on there Teo. If I make a copy of the left hand image in your first file and animate it, it is not blurred. If I make a copy of the right hand image and animate it, it is not blurred. I can’t explain this.

1 Like
5

For some reason the position of your blurry element is on a fractional pixel; while the inspector shows “174 px” it in fact lands at “174.5 px”. Hype tries to deal with integer values for position keyframes, so I’d be curious how it got in that state.

The workaround is to manually enter different value for the end keyframe for top/left positions and then enter back the previous value. This will clear it out. Also using “Position with CSS Left/Top” is a good workaround because CSS only accepts integral values anyways.

1 Like
6

Hi Jonathan,
Thank you for your reply.
I found another workaround by using only even numbers for the width and height of images.
Do you think this will be corrected in a future release ?

7

I filed a bug report in our system, and correctness issues like this tend to be higher priority. There’s some related work I’m planning to do soon with fractional values for rotation, so I am hoping to try addressing it with that, but can’t make promises on a fix or release date.

1 Like