I would lottie2 to start at the end of the animation when loaded. Instead, it starts on the first frame, the first click doesn't affect anything, and then it works normal.
const lottie1 = document.querySelector('.lottie1');
let direction1 = 1;
lottie1.setDirection(direction1);
lottie1.addEventListener('click', () => {
lottie1.setDirection(direction1);
direction1 = direction1 === 1 ? -1 : 1;
lottie1.play();
});
const lottie2 = document.querySelector('.lottie2');
let direction2 = -1;
lottie2.setDirection(direction2);
lottie2.addEventListener('click', () => {
lottie2.setDirection(direction2);
direction2 = direction2 === 1 ? -1 : 1;
lottie2.play();
});.lottie1, .lottie2 {
cursor: pointer;
}<script src="https://unpkg.com/@lottiefiles/lottie-player@0.4.0/dist/lottie-player.js"></script>
<h2>Works fine</h2>
<lottie-player
class="lottie1"
mode="normal"
src="https://assets10.lottiefiles.com/packages/lf20_cgtqwvja.json"
style="width: 50px">
</lottie-player>
<h2>Doesnt work - should start filled</h2>
<lottie-player
class="lottie2"
mode="normal"
src="https://assets10.lottiefiles.com/packages/lf20_cgtqwvja.json"
style="width: 50px">
</lottie-player>