Raphael Animation with scroll event

Question

Is there a way to start animating an object when the user is scrolling the website and to stop the animation when user stops scrolling, using Raphaël—JavaScript Library?

I already created the animation but i cant find anything on how to sync the animation with the website scrollbar.

Edit:

var path6 = paper.path('M 148 140 L 176 164 L 94 189 L 148 140 Z').attr("fill","#9B5024").attr("stroke","transparent").attr("stroke-width",0);

_path3 = Raphael.transformPath('M 148 140 L 102 155 L 94 189 L 148 140 Z');
path6.animate({path: _path3}, 4000);

The above is my code what i would like to do is to sync my animation with the page scroll, so instead of providing the 4000 ms in .animate() i would like the object to animate as long as the user scrolls.

Answer 1

You can easily do this with pure javascript.

Just apply the Raphaël start and stop method.

Have a look at this weave.

var timer = null;
function scrolling() {
    document.getElementById("Status").innerHTML = "scrolling..";
      if(timer !== null) {
        clearTimeout(timer);        
    }
    timer = setTimeout(function() {
        document.getElementById("Status").innerHTML = "stopped scrolling";
    }, 150);
}

window.onscroll = scrolling;

Update

Here's a weave with a stopping and starting animation.

var paper = new Raphael('Animation', 100, 100);
var rect = paper.rect(20, 20, 20, 20).attr({fill: '#F00'});
var anim = Raphael.animation({transform: "r360"}, 2500).repeat(Infinity);

var timer = null;
function scrolling() {
    document.getElementById("Status").innerHTML = "scrolling..";
      if(timer !== null) {
        rect.animate(anim);      
    }
    timer = setTimeout(function() {
        rect.stop();
    }, 150);
}

window.onscroll = scrolling;