Viewport Transition

Want to create a cinematic "flying" effect between nodes or points of interest? By combining Flow instance methods (like setViewport, zoomTo, or fitView) with native CSS transitions, you can create smooth, high-performance viewport animations without external animation libraries.

Smooth Panning Demo

Click the buttons below to see the camera glide smoothly to specific "Interest Points" (POI) within the diagram.

Node 1

Node 2

Node 3

Smooth POI Panning

How it Works

The setViewport and fitView methods update the transform property of the internal .yh-flow__content layer. By simply adding a CSS transition to this specific selector, you enable hardware-accelerated animations for "free".

Method	Role	Logic
setViewport	Position Update	Coordinates the direct translation and scale of the content stage.
fitView	Auto-Scaling	Calculates the bounding box of all nodes and sets a viewport that encompasses them within the current container.
CSS Transitions	Interpolation	Handles the smooth delta between the old and new matrix() values using the browser's native compositing engine.

TIP

Using CSS transitions for viewport movement is generally smoother than JS-based libraries because it offloads the heavy lifting to the GPU and avoids main-thread congestion during high-frequency graph rendering.