javascript - Start & Stop lottie playeranimation with buttons - Stack Overflow

Very basic stuff, but im still struggling with javascript.

I have this lottie animation, which is not svg.

<script src="/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
<lottie-player src=".json"  background="transparent"  speed="1"  style="width: 300px; height: 300px;" controls></lottie-player>

<button id="start">START</button>
<button id="stop">STOP</button>

Very basic stuff, but im still struggling with javascript.

I have this lottie animation, which is not svg.

<script src="https://unpkg./@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
<lottie-player src="https://assets2.lottiefiles./packages/lf20_6gduajmo.json"  background="transparent"  speed="1"  style="width: 300px; height: 300px;" controls></lottie-player>

<button id="start">START</button>
<button id="stop">STOP</button>

My goal is to have a button(#start) to start the animation and play it one time, then remain in the last frame. Second button(#stop) should either jump immediately to the first frame of the animation or simply revert it and remain in the first frame.

It's basically the same functionality as the standard lottie controls. But I need the button to control something else as well, and I don't want the timeline of lottie controls.

I tried to fiddle with this Codepen, and insert my file, but I didn't manage to work it out.

• javascript
• html
• animation
• lottie

Share Improve this question Follow edited May 27, 2022 at 14:21 Shawn Carrié 2144 bronze badges asked Jun 1, 2021 at 15:28 allegriallegri 18922 gold badges22 silver badges1212 bronze badges 0

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

You can use methods play() and stop() on lottie by declaring each method inside the event of the corresponding button.

To hide the standard navigation bar remove attribute controls in tag lottie-player.

You can read in detail here.

let player = document.querySelector("lottie-player");
let play = document.querySelector("#start");
let stop = document.querySelector("#stop");

play.onclick = function () {
    player.play();
};

stop.onclick = function () {
    player.stop();
};

<script src="https://unpkg./@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
<lottie-player src="https://assets2.lottiefiles./packages/lf20_6gduajmo.json"  background="transparent"  speed="1"  style="width: 300px; height: 300px;"></lottie-player>

<button id="start">START</button>
<button id="stop">STOP</button>

In this example I leave it up to JQuery to start/stop the lottie animation:

$('#start').click(function(){
    $('lottie-player').get(0).play();
});
$('#stop').click(function(){
    $('lottie-player').get(0).stop();
});

You need to use .get(0) to run play/stop on an HTML object, not the JQuery object.