Lottie Player Reverse Direction not working without loop

Question

I have a Lottie animation and I want to play it in the reverse direction. I do not want the animation to loop, it should just play once (in a reverse direction) and stop. I have tried using setDirection=-1 but this doesn't seem to work and only works if loop is activated.

How can this work? Thanks

I have previously tried using setDirection=1 to play it forward and it works, I also tried setDirection=-1 to play it backwards but this only work if I set the animation to loop

Answer 1

var animation = lottie.loadAnimation({
  container: document.getElementById('animation'),
  renderer: 'svg',
  loop: false,
  autoplay: false,
  path: 'animation.json'
});

animation.setDirection(-1); // set the direction to reverse
animation.setSpeed(-1); // set the speed to a negative value to play in reverse 
direction
animation.play(); // start playing the animation

we're using the setDirection method to set the direction of the animation to reverse (-1), and then using the setSpeed method to set the speed of the animation to a negative value. Finally, we're calling the play method to start playing the animation.

Note that we've set the loop property to false in the loadAnimation options, so the animation will only play once and then stop. If you want to play the animation more than once in reverse direction, you can adjust the setSpeed value or call the setDirection and setSpeed methods again before calling play again.