Hmm. I'm not sure why anybody would think that using transform in a javascript callback loop would be faster than setting top/left in a javascript callback loop. However, it's obvious why using tranform and css animations would be faster: there's no javascript loop required.<p>If animating in javascript, every frame requires a new javascript turn, and every frame requires crossing the js/native bridge. Theoretically it should be faster to cross the bridge only once, which is possible when using translate because both x and y can be set in one crossing of the bridge, wheras setting top and then setting left requires crossing the bridge twice. However the cost of setting up and tearing down the turns required to do the animation in js would dwarf any tiny advantage gained by only crossing the bridge once instead of twice.<p>However if you instead simply use a transform with a duration and set the x and y to the final value instead of manually setting all the intermediate values, it's obvious why things should be much faster: there are no longer any js turns required to carry out the entire animation other than the first one where you set it up, and there's no bridge crossing required except for the first one, either.<p>Did I miss something here? Why would the author think that setting transform in a loop would be faster than setting top/left in a loop? They are basically equivalent. CSS animations with a duration are vastly different, however.
i'm assuming there's no "callback" or event to "listen" for that can be hooked to identify the end of the animation when using the translate method, you just have to rely on the preset duration?