lottie

import lottie from "lottie-web";
import "@lottiefiles/lottie-player";

import { create } from "@lottiefiles/lottie-interactivity";

const lottiesScroll = document.querySelectorAll(".lottie-scroll-player");

if (lottiesScroll.length) {
  lottiesScroll.forEach(function (anim) {
    // ne surtout pas le lancer dans un domContentLoad
    anim.addEventListener("ready", () => {
      create({
        mode: "scroll",
        player: "#" + anim.getAttribute("id"),
        container: "#" + anim.getAttribute("id"),
        actions: [
          {
            visibility: [0, 0.1],
            type: "stop",
            frames: [0],
          },
          {
            visibility: [0.1, 0.6],
            type: "seek",
            frames: [0, anim._lottie.totalFrames],
          },
          {
            visibility: [0.6, 1.0],
            type: "stop",
            frames: [anim._lottie.totalFrames],
          },
        ],
      });
    });
  });
}

// document.addEventListener('DOMContentLoaded', function () {

const lotties = document.querySelectorAll(".lottie-player");
if (lotties.length) {
  lotties.forEach(function (anim) {
    //init
    const animation = lottie.loadAnimation({
      container: anim,
      path: anim.getAttribute("data-json"),
      renderer: "svg",
      loop: false,
      autoplay: false, // on data_ready
      rendererSettings: {
        progressiveLoad: true, // Boolean, only svg renderer, loads dom elements when needed. Might speed up initialization for large number of elements.
      },
    });

    window.addEventListener("load", () => {
      // animation.addEventListener('data_ready', () => {
      animation.play();
    });
  });
}
// });