If you click on the following link, you will see a jsFiddle that I have created to demonstrate my question:
In my project, I have developed a function that allows for panning and zooming to a specific element. This function is essential for creating smooth transitions between frames in a comic book.
Currently, the function works well using jQuery's .animate(), however, I am interested in utilizing CSS transforms when available as they offer better performance on modern browsers.
Unfortunately, I am struggling to replicate the same behavior using CSS transforms.
In the jsFiddle, you will notice two sets of controls, with each button representing a frame in the 'comic'. The controls using jQuery animate work correctly, while the ones using CSS transforms do not.
The issue seems to stem from inaccuracies in measuring the offset() attributes once an element has been scaled using CSS transforms.
I would greatly appreciate any assistance with this matter.
NOTE: When switching between the .animate and transform methods in the jsFiddle, make sure to 're-run' it to reset the modified CSS.
EDIT: I have updated the link to the jSfiddle to include missing code. Additionally, I want to clarify that I need to use percent-based values since the entire application is fully responsive.