How can svg(from bodymovin) work repeat without 'loop', when i use click function in jquery?


#1

I made an animation svg file in after effect and exported it with bodymovin.

i copied and pasted in my editor the source in ‘demo.html’.

var params = {
    container: document.getElementById('lottie'),
    renderer: 'svg',
    loop: false,
    autoplay: true,
    animationData: animationData
};

var anim;

anim = lottie.loadAnimation(params);

i made loop true to false, because i do not need loop.
but when i click a icon(img file), i want to repeat only the animation svg file.

i tried this source

$('#icon').click(function(){
  $('#anSvg').reload();
});

but it does not work…
location.reload is not what i want …


#2

Hi @ftorres99, you can replay the animation via the animation instance:

var animation = lottie.loadAnimation(params)

// Then, later:
animation.stop()
animation.play()
// Or:
animation.goToAndPlay(0)

#3

Hi @m3g4p0p, unfortunatly it is still not working…
i tried them

animation.stop(false);
animation.play(true);
 
// or;

$('#icon').click(function(){
  $('#anSvg').animation.play(true);
});

Should i probably add one more script for the codes?,


#4

Well it works for me… are there any errors in the console?

Neither of these methods take any arguments though, it’s just .stop() and .play(). Also in my above snippet I assigned the animation to an animation variable, whereas in your code it’s called anim – the name of the variable doesn’t matter, but you’ll have to adjust it either way.

That won’t work at all, you’ll have to call those methods on the animation instance as shown above.

BTW, please format your code snippets for better readability – you can do so by selecting it and clicking the </> icon.