Search code examples
javascriptsetintervalsvgator

Get SVGator Javascript API to work in a timer loop


I have a 4 second SVGator animation that needs to run in it's entirety, then have the last 2 seconds loop indefinitely. I've exported as SVG/Javascript, then used the following JS code...

const element = document.getElementById('eDuWOrNCbmP1');
var player = element ? element.svgatorPlayer : {};

function timerLoop() {
    player.seekTo(2000)();
    setInterval( timerLoop, 2000);
}
if (player.play) {
    player.play();
    setInterval( timerLoop, 4000);  
}

This works fine, but just for one iteration of timerLoop, ie one repetition of the last 2 seconds. After this, it stops working with the JS error...

Uncaught TypeError: player.seekTo(...) is not a function
at timerLoop

Any ideas?


Solution

  • If you check player.state in timerLoop(), you will probably find that it is "playing" the first time through, but "ended" on subsequent calls.

    Which means you need to call .play() after seeking in timerLoop().

    const element = document.getElementById('eDuWOrNCbmP1');
    var player = element ? element.svgatorPlayer : {};
    
    function timerLoop() {
        player.seekTo(2000)();
        // EDIT Add this .play()
        player.play();
        setInterval( timerLoop, 2000);
    }
    if (player.play) {
        player.play();
        setInterval( timerLoop, 4000);  
    }