When animating an element that is just moving on the stage, the best framerate performance can usually be garnered by using the translate() family of CSS transform functions, such as:
transform: translate(5px,5px);
transform: translateX(5px);
transform: translateY(5px);
transform: translate3d(5p,5px,0);
Using any of the translate() functions to move things around on the stage garners far better performance that animating the “left” and “top” properties.
Unfortunately, no translate() functions seem to be available in the Properties pane within the Timeline Panel.
Also, unfortunately, when animating the Origin (Left) and Origin (Right) properties, the translate() functions never seem to be applied “behind the scenes”. These properties are always animated via procedural JavaScript.
From an app design perspective, that approach makes sense for a number of reasons, but it can also significantly hurt animation performance on even the latest mobile devices and Operating Systems, such as an iPhone 6. Animations look less smooth, especially when multiple elements are animating concurrently.
The various scale() and rotate() CSS transform functions are currently available in Hype 3.0. But the translate() functions seem to be notably “missing.”
Are there plans to add support in the UI for translate() functions?
Is there some other way to “force” a hardware-accelerated mode of moving elements on the stage?
Currently we are unable to utilize Hype 3 Pro for building mobile advertisements because of less than optimal animation performance when moving objects on the stage.