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

admin管理员组

文章数量:1397058

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: .lottiefiles%2Fprivate_files%2Flf30_6e5k38rk.json

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./web-player?lottie_url=https%3A%2F%2Fassets5.lottiefiles.%2Fprivate_files%2Flf30_6e5k38rk.json

• javascript
• html
• lottie

Share Improve this question Follow asked Jun 15, 2021 at 4:58 AshikAshik 3,4481212 gold badges3939 silver badges6565 bronze badges 3

• You can use Intersection observer API and after the person see it just set the loop property to none ! – Sanmeet Commented Jun 15, 2021 at 5:02
• It looks like the animation ends on being hidden. So you have to tell it what frames to play. I don't know lottiefiles. But I would check the getLottie() method of lottiefiles player. And then with the real lottie library you can use the anim.playSegments(segments, forceFlag) – hyperdrive Commented Jun 15, 2021 at 5:11
• Hey man you can try after the animation pletes add svg (from Fram when it is pleted ) it would be much easier ! – Sanmeet Commented Jun 15, 2021 at 5:15

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

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.

You can use loop={false} to stop the loop.

Setup loop property in options to 1:

loadingSuccessOptions: AnimationOptions = {
        path: '/assets/animations/success.json',
        loop:1
      };

<ng-lottie [options]="loadingSuccessOptions"></ng-lottie>

本文标签： javascriptlottieplayer Is there any way to stop the animation after it loadsStack Overflow