Lottie2 comenzaría al final de la animación cuando se carga. En cambio, comienza en el primer cuadro, el primer clic no afecta nada y luego funciona normalmente.
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>