Animate jquery reel via scroll

Question

I am working on a scroll application - and one of the requested features is to animate the jquery reel - as the user scrolls --

I've tried to trigger the play - and stop feature on a frame - and link it to the scrollTop - but its not doing anything.

http://jsfiddle.net/dxf17mbn/

var threesixty = $('#image').reel({
  image: 'http://test.vostrel.net/jquery.reel/example/object-movie-clockwise-sprite/f1-reel.jpg',
  speed: 0,
  frames: 35,
  cw: true,
  throwable: 1.2
});



console.log("threesixty", threesixty);

var $win = $(window);
$win.on('scroll', function() {
  var top = $win.scrollTop() / 3;

  console.log("top", top)

  var fraction = top / 3;

  $('#image')
    .trigger('play')
    .bind('frameChange', function() {
        console.log("frame change--")
      if ($(this).reel('frame') == 47) {
        $(this).trigger('stop');
      }
    });

});

Answer 1

When making questions about specific plugins make sure to mention that or even provide a link to their API.

Simply changing the event been triggered from play to stepRight will make a difference. You want to use of both stepRight and stepLeft depending if the user is scrolling up or down.

I would also remove the frameChange listener from the scroll callback since you will endup adding a lot of duplicate listeners for this event.