Question

I’m using jQuery.crSpline to animate a graphic along a curved path. I’m pretty happy with the result.

However, the full canvas size is intentionally pretty wide – definitely larger than most screens – so the graphic will run out of viewport space pretty quickly and animate off the screen.

Instead, I’d like browser viewport to follow or centre on the image so that it stays ‘in shot’.

How would I go about this with jQuery? Is scrollTop an option?

I’ve created a jsFiddle demo, based on the crSpline demo source, but with a wide minX setting.

---

NB: I did first attempt this with YUI3 and Loktar offered a canvas based solution, however I’m not using YUI & canvas any longer.

Answer 1

There exists an option for step function in jQuery animate,which is run on every step of the animation.

See second version of function parameters here :
http://api.jquery.com/animate/

.animate( properties, options )

propertiesA map of CSS properties that the animation will move toward.

optionsA map of additional options to pass to the method. Supported keys:

duration: A string or number determining how long the animation will run.
easing: A string indicating which easing function to use for the transition.
complete: A function to call once the animation is complete.
step: A function to be called after each step of the animation.
queue: A Boolean indicating whether to place the animation in the effects queue. If false, the animation will begin immediately. As of jQuery 1.7, the queue option can also accept a string, in which case the animation is added to the queue represented by that string.
specialEasing: A map of one or more of the CSS properties defined by the properties argument and their corresponding easing functions (added 1.4).

See this fiddle based on your code, which calls step function to adjust viewport :

http://jsfiddle.net/gNdwD/35/

$('<div id="mover" />')
        .appendTo($(document.body))
        .animate({ crSpline: spline },{
            duration: 20000,
            step: function() {       /* THE STEP FUNCTION TO ADJUST VIEWPORT */
              var mover = $('#mover'),               
              posX = mover.position().left;
              posY = mover.position().top;

              $(window)
              .scrollLeft(posX - $(window).width() / 2)
               .scrollTop(posY - $(window).height() / 2);
            } ,
            complete:function () {
                      // Re-run the demo with a new spline after we're done
                       window.setTimeout(function() {
                       DEMO.run();
                      }, 5000);
            }
        });