How do I track YUI-driven animations from a screen or center viewport?

Question

I am using code adapted from a YUI3 documentation document to animate a graph along a curved path.

The entire canvas size is intentionally quite large - definitely larger than most screens - so the GUI will pretty quickly disappear from the viewing and animation area from the screen.

Instead, I would like the browser window to follow or focus on the image so that it remains “in frame”.

Is there any way to use YUI? Or is something simpler?

Answer 1

You can do something like this, basically just make sure the viewport always keeps track of the object on the canvas , taking into account the coordinates of the canvas relative to the page.

 function track(x,y, offsetX, offsetY){ var trackX = x - (canvas.offsetLeft + offsetX); trackY = y - (canvas.offsetTop + offsetY); window.scrollTo(trackX, trackY); } 

Live demo