Lottie. Animation in. wix?

1 Antwort

regex9
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
HTML, Webseite, Webdesign
12.09.2022, 11:12

Den Lottie Webplayer kannst du via JavaScript steuern.

<div id="animation-container"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.9.6/lottie.min.js"></script>
<script>
  const animationContainer = document.getElementById("animation-container");
  let animationEnded = true;
  let playing = false;

  const animation = lottie.loadAnimation({
    autoplay: false,
    container: animationContainer,
    loop: false,
    path: "https://assets9.lottiefiles.com/packages/lf20_PBgNop.json",
    renderer: "svg"
  });

  animationContainer.addEventListener("click", evt => {
    if (playing) {
      animation.stop();
      playing = false;
      animationEnded = true;
      return;
    }

    if (!animationEnded) {
      return;
    }

    animation.goToAndPlay(0, true);
    playing = true;
    animationEnded = false;
  });

  animation.addEventListener("complete", evt => {
    animationEnded = true;
  });
</script>

Für das path-Property müsstest du natürlich die URL zu deiner JSON angeben.

Statt die Animation abrupt zu stoppen, könnte man sie ebenso pausieren. Dafür müsste nur der Teil mit dem click-Handler angepasst werden.

animationContainer.addEventListener("click", evt => {
  if (playing) {
    animation.pause();
    playing = false;
    return;
  }

  if (!animationEnded) {
    animation.play();
    return;
  }

  animation.goToAndPlay(0, true);
  playing = true;
  animationEnded = false;
});

Eine Dokumentation zu der genutzten Bibliothek findest du hier.

Wenn du diesen Code nicht in Wix / über Velo an die passende Stelle einbinden kannst, musst du ihn wohl auf einer extra Webseite hosten und diese bei Wix dann als iFrame einbinden. In dem Fall sollten die folgenden beiden Zeilen

<!doctype html>
<title>Animation</title>

noch am Anfang des obigen Snippets vorgehängt werden.