"Picasa-like" smooth scroll for Chrome

October 2009 demo, really unbaked!

One of the major feature requests for Google's Chrome browser is Smooth Scrolling.


A cool guy named Patrick wrote a prototype of smooth scrolling using the unreleased Chrome extension system.

Several people asked for a version that scrolls "like Picasa", and since I wrote that I thought it would be fun to try.

Interpolator and tuning

I modified Patrick's code to use Sree's port of my pulse interpolator. Also, I re-parameterized his constants so you can set framerate, scroll speed, and scroll size in pixels, which makes it easier to tune the animation.

Here's sscr.js.

The clever thing about Patrick's code is that it uses timeouts to overlap animations—overlapping in an additive way is a very important trick. The downside to this approach is that it can get jittery if you have two animations going opposite directions, and it also ratchets up the framerate as you overlap too much. An improvement would be to write to an array of upcoming frames at a fixed framerate, so opposing animations would be added first, and wouldn't fight things out in the window.

Anyway, this isn't a very finished solution, as many people have noted on Patrick's page, because some pages seem to steal the mousewheel binding, iframes and scrolling divs don't work, and it doesn't work for arrow keys or pageup/dn/home/end, just the mousewheel.

It will be interesting to see if someone can make an extension that does this really well, or if it just gets baked into the native code first.

In the meantime, if you want to try this out, you can get on the Windows Dev channel of chrome here. To hack on the animation yourself, it's okay to just edit the .js file and reload the extension or the whole browser.

Here's my .crx file (click to install) that should install okay on dev-channel Chrome.