lottie-player: Is there any way to stop the animation after it loads?

Viewed 3156

I am using this lottie-player in html. I want to freeze the animation, after it loads for first time.

First I have used this,

<lottie-player
          src="./lottie.json"
          background="transparent"
          speed="1"
          style="width: 100%; height: 100%"
          loop
          autoplay
></lottie-player>

but, as I don't want a loop, so I remove that.

<lottie-player
          src="./lottie.json"
          background="transparent"
          speed="1"
          style="width: 100%; height: 100%"
          autoplay
        ></lottie-player>

Now, the problem is, after the first loads, the animation disappears.

how to fix this?

animation link: https://lottiefiles.com/web-player?lottie_url=https%3A%2F%2Fassets5.lottiefiles.com%2Fprivate_files%2Flf30_6e5k38rk.json

1 Answers

The reason why you see no svg at the end is the end of the lottie animation shows nothing.

If you want to end the animation at a specific point preferably where the svg is still visible, you should use pause() method available. Please refer to the lottie docs on github.

Related