Animated Transitions

Starting with use-split-view@0.2.0, setView accepts an optional second argument AnimationOptions — forwarded directly from the underlying use-zoom-pinch hook. Since 0.3.0, centerZoom and resetView expose the same argument too. You can use this to animate programmatic view changes (reset, center, fit to detail) instead of snapping.

Animated reset

const { setView } = useSplitView()

const resetAnimated = () => {
  setView({ x: 0, y: 0, zoom: 1 }, { animate: true, duration: 400 })
}

<button onClick={resetAnimated}>Reset (smooth)</button>

Fly to a region

const flyToTopLeft = () => {
  setView({ x: -400, y: -200, zoom: 2 }, { animate: true, duration: 600 })
}

Easing

Easing helpers are re-exported from use-split-view for convenience:

import { useSplitView, easeInOut, easeOut, linear } from "use-split-view"

const { setView } = useSplitView()

setView(
  { x: 0, y: 0, zoom: 1 },
  { animate: true, duration: 500, easing: easeInOut },
)

Pass any custom (t: number) => number function if you want your own curve.

AnimationOptions

interface AnimationOptions {
  animate?: boolean        // enable animation, default false
  duration?: number        // milliseconds, default 300
  easing?: (t: number) => number  // default easeOut
}

Chaining with centerZoom

centerZoom accepts AnimationOptions as its second argument, so animated zoom-to-center is built in:

const { view, centerZoom } = useSplitView()

centerZoom(view.zoom * 2, { animate: true, duration: 250 })

resetView likewise accepts options:

resetView({ animate: true, duration: 400 })

When not to animate

Avoid animating view changes that happen while gestures are active — e.g. inside onViewStateChange. Animations are for discrete jumps like reset, “fit to selection”, or navigation between predefined views. Continuous interaction should stay synchronous so it feels tactile.