JSFiddle - React, Tailwind, and code Playground

by Sebastian Kay

HTML

<script
  src="https://unpkg.com/@dotlottie/[email protected]/dist/dotlottie-player.mjs"
  type="module"
></script>

<dotlottie-player
  id="lottie_runner_player"
  background="transparent"
  speed="1"
  style=""
  direction="1"
  playMode="normal"
  loop
  controls
  autoplay=true
></dotlottie-player>

<button id="btn_autorun">ToggleAutorun</button>

JavaScript

const colormode = "dark"

const dotlottiePlayer = document.querySelector("dotlottie-player#lottie_runner_player")
const toggle_autorun_btn = document.querySelector("#btn_autorun")

const lottiefile =
  colormode == "light"
    ? "https://lottie.host/07f9842b-03a8-46dc-a45f-684d4cf57429/2amWXB96uz.lottie"
    : "https://lottie.host/e3515e09-f615-49f0-a63d-a421b45ceb45/XEuKdFRH19.lottie"
	
dotlottiePlayer.src = lottiefile
dotlottiePlayer.autoplay = false

toggle_autorun_btn.addEventListener("click", () => {
	console.log("btn clicked" + dotlottiePlayer.autoplay)
	dotlottiePlayer.autoplay=!dotlottiePlayer.autoplay
	dotlottiePlayer.play()
})