How can I recreate my jQuery .animate() element zoom/pan using css transform?

Question

I have put together a jsFiddle to illustrate my question:

http://jsfiddle.net/VbCcA/3/

I have a function which will pan and zoom to a specified element. This is used to create the transition between frames in a comic-book.

I have this working fine using jQuery's .animate(), but I would like to use css transforms when available as they perform significantly better on modern browsers.

However I cannot seem to correctly recreate the same behaviour.

Rather than describe it poorly here, if you take a look at the jsFiddle you will see two sets of controls, with each button corresponding to a frame in the 'comic'. the jQuery animate controls behave correctly and the css transform controls do not.

The problem appears to be down to the measuring of the offset() attributes once an element has been scaled using css-transforms.

Any help would be greatly appreciated.

NOTE: You will need to 're-run' the jsFiddle when switching method from .animate to transforms and vice-versa, in order to reset the CSS which is modified when the function runs.

EDIT: I have just corrected the link to the jSfiddle... Apologies to those that have already viewed it. The original link was missing part of the example code. Also just to clarify, I need to use percent based values as the whole app is fully responsive.

Answer 1

It certainly isn't the most direct route, but consider applying jQuery Transit (http://ricostacruz.com/jquery.transit/) to your .animate version just to see how it handles the conversion to CSS3 transform. Then you might be able to work backwards from there.