How to zoom in on center of screen?

Question

I'm trying to programmatically zoom in on what I'm seeing on the page, without changing which part of the content I'm seeing, regardless of where the scroll level is. I want this to be animated and pretty.

So I'm using $('body').animate({zoom:2.0}, 1000) to animate the zoom, but this has the irritating side effect of keeping the top of the visible window at the same point in the document (the browser's attempt to keep me where I was, actually, complete failure), so I need to basically continuously scroll to the same relative vertical center of the page as it's animating in order to get around that. How can that be done? I don't know how to do two things at once with animation--- I mean I could change multiple CSS properties at once, but how can I scroll?

Essentially, it needs to do something like this:

   Call begin zoom animation:
        1.Mark height level of any element that appears at center of window
        2.Do one step of zoom animate
        3.Scroll so that that element's height level relative to center of window is unchanged
        4.Repeat until animation is complete

Answer 1

You can using Panzoom component for your goal.