Get SVGator Javascript API to work in a timer loop

Question

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?

Ray Wallace · Accepted Answer · 2024-10-31 04:44:56Z

1

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);  
}

answered Oct 31, 2024 at 4:44

Ray Wallace

2,4191 gold badge7 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

clayRay Over a year ago

thanks, that worked! I just had to set the loop slightly shorter than the animation, because as soon as the animation reached the end, the player object seemed to be unable to seekTo().

Collectives™ on Stack Overflow

Get SVGator Javascript API to work in a timer loop

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related