Any way to alter/animate on translate(0,0) function?


(Theo Skye) #1

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.


(stephen) #2

Thanks for the post!

@jonathan actually wrote a post on our blog about the tradeoffs between top/left and translate (http://blog.tumult.com/2013/02/28/transform-translate-vs-top-left/). There are some situations where we will use translate, but you are correct we generally prefer top/left. That said we are always evaluating different techniques and we want Hype Animations to have the best performance possible!

What situations are you seeing performance issues? Perhaps you could share your document with us and we can see if there are any improvements we can make. You can go to Help->Report an issue… in Hype to send documents to us directly.