How can I make the browser window smoothly follow an animating element?

Question

In an application I'm writing I'd like to have the browser window smoothly track a div that's animated to move and resize.

My current solution is to update the scroll position at a regular interval to be "closer" to the div by using $().offset() and window.scroll in combination.

It works, but it's very choppy. I think it's because the animation and the scrolling aren't synchronized.

How can you hook into the animate function to execute code at every step. It doesn't appear to be an option listed in the manual.

Thanks.

Answer 1

Flash

(just kidding ... sort of)

What you are trying to do sounds like it is really pushing the limits of DHTML. Even if you do get it working on your development machine, it will fail (or at least, won't be smooth) for any user with a weaker computer. So if you want to get consistent smooth animation-following on all platforms, don't use DHTML; use a tool designed for it (like Flash, or maybe Silverlight if you're a .net person) instead.

However, if for some reason you want to go the DHTML route anyway (maybe all your users have bad ass PCs?), you're really going to need to explain how you are doing the animation. We can't read your mind and magically know what animation library you are using, so when you ask "How can you hook into the animate function" you need to specify what "the" animate function actually is.

**EDIT**

A commenter pointed out that you are probably using jQuery (because of your tag choice). In that case, you might want to look at this article I stumbled across this morning: http://www.smashingmagazine.com/2009/02/20/ask-sm-css-smooth-page-scrolling-divs-of-equal-height-dealing-with-ie-6/ which deals specifically with smooth scrolling and jQuery.

Answer 2

i guess you know about

jQuery(document).bind('scroll', function(){
 //animate your div
});

bind, right?