Can I slow down OpenSeaDragon pan/zoom animations?

Question

OpenSeaDragon is awesome.

If I use the Viewport#fitBounds JS method to move to a new rectangle, with default arguments, it 'animates' the transition between current view and the new requested bounds.

Is there any way to control the speed of this animation? I'd like to slow it down, so it takes longer to move from current view to the requested bounds, for a more leisurely tour.

Answer 1

Glad you like!

To affect the animation speed, play with the springStiffness and animationTime options when creating your viewer. See:

http://openseadragon.github.io/docs/OpenSeadragon.html#Options

Answer 2

You can set animationTime and/or springStiffness when you create the OSD viewer. But this will effect the user experience when manually panning and zooming with mouse (or touchpad/screen etc) too. When I slowed it down as much as I wanted, the manual pan/zoom experience was disconcerting and difficult.

But I worked out this hack to temporarily change the animationTime (or possibly springStiffness too) when doing a #fitBounds, then putting it back to what it was when you are done.

// temporarily set OpenSeadragon animation params
// to a very slow animate, then restore.
function withSlowOSDAnimation(viewport, f) {

// save old ones
var oldValues = {};
oldValues.centerSpringXAnimationTime = viewport.centerSpringX.animationTime;
oldValues.centerSpringYAnimationTime = viewport.centerSpringY.animationTime;
oldValues.zoomSpringAnimationTime = viewport.zoomSpring.animationTime;

// set our new ones
viewport.centerSpringX.animationTime =
  viewport.centerSpringY.animationTime =
  viewport.zoomSpring.animationTime =
  6;

// callback
f()

// restore values
viewport.centerSpringX.animationTime = oldValues.centerSpringXAnimationTime;
viewport.centerSpringY.animationTime = oldValues.centerSpringYAnimationTime;
viewport.zoomSpring.animationTime = oldValues.zoomSpringAnimationTime;
}

Use like:

withSlowOSDAnimation(viewer.viewport, function() {
  // stuff
  viewer.viewport.fitBounds(somebounds);
});

This works, although I'm not sure if I'm using internal API that may be subject to change. This would perhaps be a good additional feature for OpenSeadragon, ability to supply animationTime, springStiffness, and/or just some OpenSeadragon.Spring object(s) with the fitBounds call, to apply to that fitBounds.