How to zoom to mouse pointer while using my own mousewheel smoothscroll?
<p>Part of my app contains functionality similar to google maps in that the user should be able to zoom in and out on an image within a container.</p>

<p>In the same way that google maps does I want the user to be able to scroll with the mousewheel and the pixel on the image to remain directly under the mousepointer at all times.  So essentially the user will be zooming to wherever their mouse pointer is.</p>

<p>For the zooming/translating I am using css transforms like so:</p>

<p>visible</p>

<pre><code>   $('#image').css({
            '-moz-transform': 'scale(' + ui.value + ') translate(' + self.zoomtrans.xNew + 'px, ' + self.zoomtrans.yNew + 'px)',
            '-moz-transform-origin' : self.zoomtrans.xImage + 'px ' + self.zoomtrans.yImage + 'px',
              '-webkit-transform': 'scale(' + ui.value + ') translate(' + self.zoomtrans.xNew + 'px, ' + self.zoomtrans.yNew + 'px)',
            '-webkit-transform-origin' : self.zoomtrans.xImage + 'px ' + self.zoomtrans.yImage + 'px',
              '-o-transform': 'scale(' + ui.value + ') translate(' + self.zoomtrans.xNew + 'px, ' + self.zoomtrans.yNew + 'px)',
            '-o-transform-origin' : self.zoomtrans.xImage + 'px ' + self.zoomtrans.yImage + 'px',
              '-ms-transform': 'scale(' + ui.value + ') translate(' + self.zoomtrans.xNew + 'px, ' + self.zoomtrans.yNew + 'px)',
            '-ms-transform-origin' : self.zoomtrans.xImage + 'px ' + self.zoomtrans.yImage + 'px',
              'transform': 'scale(' + ui.value + ') translate(' + self.zoomtrans.xNew + 'px, ' + self.zoomtrans.yNew + 'px)',
            'transform-origin' : self.zoomtrans.xImage + 'px ' + self.zoomtrans.yImage + 'px'
            });
</code></pre>

<p>I have managed to find various implementations of how to go about doing this however I am using a self rolled smooth scroll technique to interpolate the mouse events and provide momentum.</p>

<p>Trying to get the two to work correctly together is proving troublesome.</p>

<p>Rather than paste a whole load of code here I have created a jsFiddle that includes the mousewheel smoothscroll technique along with the zoom function that I have so far.</p>

<p><a href="http://jsfiddle.net/gordyr/qGGwx/2/" rel="nofollow">http://jsfiddle.net/gordyr/qGGwx/2/</a></p>

<p>This is essentially a fully functioning demo of this part of my app.</p>

<p>If you scroll the mousewheel you will see that the jqueryui slider interpolates and provides the momentum/deceleration correctly.  However the zoom does not react correctly.</p>

<p>If you scroll your mousewheel only one point the zoom works perfectly but any further scrolls do not work.  I assume this is because the scale of the image has now changed causing the calculations to be incorrect.  I have attempted to compensate for this but have not had any luck so far.</p>

<p>So to summarise, I would like to modify the code in my jsFiddle so that the image zooms directly to the mousepointer at all times.</p>

<p>Huge thanks in advance to anyone willing to help. </p>
