left and top vs translate(x,y). Why?

[Emmanuel Ulloa]

Looking at the code generated through the Quick Animation mode I see you change top and left instead of using the translate(x,y) transform.
I would like to know why the developers preferred this approach.

[peterelst]

Results may vary depending on the particular use case but generally speaking translate gives you better performance when animating. Paul Irish did an interesting video about it a while back: http://www.youtube.com/watch?v=NZelrwd_iRs

[Emmanuel Ulloa]

That is what I mean: why GWD uses top and left when translate is supposed to be better?

[Nivesh Rajbhandari]

Hi Emmanuel,

This is a great question! We had this discussion internally as well.

You are correct that in most cases using CSS transforms will perform better than animating with left and top because CSS transforms can take advantage of the GPU for compositing different layers.

However, automatically forcing every animated element to be rendered with the GPU might have negative performance impact, especially on mobile browsers with low-end GPUs and less RAM.  Since we want our output to play well on all browsers, including the low-end mobile browsers, we currently leave it up to our user on how to best optimize their content for their desired audience.  We don't want to lead our users into thinking that there is a "silver-bullet" that will automatically make all their animations perform well on all browsers. Users should be aware of the tradeoffs.  It will usually take some trial and error to make sure their animations play back as expected in the various target devices.

If you know your output will be played back on browsers and devices capable of taking advantage of the GPU, you can use the "3d object translate tool" (the third tool from the top) to position the animation using 3d translate values. You can also set the 3d translate values directly in the Properties panel's "3d position and view" section. Finally, if the element has any 3d properties already applied on it, GWD's "Selection tool" will also use 3d transforms for future positioning actions.

Thanks,

Nivesh

(GWD team)

[Emmanuel Ulloa]

Thanks so much for the answer Nivesh.  Very enlightening.  If you ever set up a publish profile feature it will be useful to have an option:
Change positions using:
<select>

<option>Top and left</option>
<option>transform: translate(x,y)</option>
<option>transform: translate3d(x,y,0px)</option>*

</select>
*I've heard that translate3d is better than translate because its GPU performance is better in iPad and iPhone.