Trigger an SVG animation on scroll

Question

I would like to trigger an SVG animation (thats coded into the SVG file itself) to happen when the user scrolls down. I believe this is done by setting "begin: indefinite" on "" and then setting it to 0 with jquery/js when the user scrolls? Anything I have tried does not seem to be working so I was wondering if anyone can give me some better direction on how to accomplish this.

Answer 1

Setting the begin time of an animation element to "0" tells it to start immediately after the document loads. Since the document has already loaded by the time your user is scrolling, it won't have any effect at that point.

To trigger an animation element using Javascript, use the beginElement() or beginElementAt(delayInSeconds) methods. The first method starts the element immediately, the second starts after the specified delay. More info in the SVG specs .

window.addEventListener('scroll', function(e){
    document.getElementById("animateOnScroll")
        //.setAttribute("begin", 0); //this doesn't work!
        .beginElement(); //this does!
});

http://fiddle.jshell.net/k95aZ/