Start & Stop lottie player/animation with buttons

user_15816848 0
Viewed 3781

Very basic stuff, but im still struggling with javascript.

I have this lottie animation, which is not svg.

<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
<lottie-player src="https://assets2.lottiefiles.com/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.

lottie animation html javascript
2 Answers

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.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
<lottie-player src="https://assets2.lottiefiles.com/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>

user_135734440

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.

user_29822060
Related