Play and pause Lottie animation with button

Hello,

In my web project there is a Lottie animation, and two buttons: a play button and a pause button. The buttons have different classes.

When the play button is clicked, the Lottie animation starts by following these steps:

  • On 1st click, start an animation
  • Timed animation includes a first action with the Lottie animation at 0%
  • Timed animation includes a second action with the Lottie animation at 100% and the duration of the animation in seconds

This works perfectly, and when the user clicks the play button the Lottie animation starts.

However I would like to be able to pause the animation (by clicking on the pause button), and resume it (by clicking on the play button again).

Is that possible? Could you give me the steps to achieve this?

Thank you so much for your help!

1 Like