Smooth popup translations

[ericmagnuson]

Hey everyone!

In a project I'm working on, we animate the movement of an object, translating it from one point to another point. It works well, but when a Popup is attached, we found that the translation of the Popup looks quite choppy (see video below). After going through the code, we narrowed it down to the fact that pixel coordinates get rounded right before they are passed into the CSS translate that powers the Popup animation.

For a lot of applications, that makes sense — I imagine the rationale is that the Popup will always be snapped to pixels, decreasing the amount of antialiasing applied. In other cases such as ours where the Popup is animated, it leads to choppiness.

What are your thoughts about making this rounding behavior a configurable option for a Popup? See the second video for an example of the rounding removed. Thanks in advance!

Current behavior:

Choppy.Animation.mov

Proposed solution:

Smooth.Animation.mov

[neodescis]

Excellent sleuthing. I think making the rounding configurable would be great. I would also recommend a getter/setter for the new option, as I could see wanting to turn the rounding off while animating, and then turning it back on when finished.

[ericmagnuson]

That's a great suggestion! I could totally see that behavior being wanted.