// // function animateStackingImages() {
//   var rotating_imgs = gsap.utils.toArray('.modal-img')
//     rotating_imgs.forEach((rotating_img) => {
      var timeline = gsap.timeline({
        repeat: -1,
        paused: true,
      })

      var targets = document.querySelectorAll('img')
      var numberOfTargets = targets.length

      var duration = 0.5 //change this
      var pause = 0.5 // change this

      var stagger = duration + pause
      var repeatDelay = stagger * (numberOfTargets - 1) + pause

      timeline
        .from(targets, {
          duration: duration,
          stagger: {
            each: stagger,
            repeat: -1,
            onRepeat: setZIndex(1),
            repeatDelay: repeatDelay,
          },
        })
        .to(
          targets,
          {
            duration: duration,
            stagger: {
              each: stagger,
              repeat: -1,
              onRepeat: setZIndex(0),
              repeatDelay: repeatDelay,
            },
          },
          stagger
        )
    // })

    function setZIndex(value) {
      return function () {
        this.targets()[0].style.zIndex = value
      }
    } 
// }

const modals = document.querySelectorAll("[data-modal]");

modals.forEach(function (trigger) {
  trigger.addEventListener("click", function (event) {
    event.preventDefault();
    const modal = document.getElementById(trigger.dataset.modal);
    timeline.restart();
    modal.classList.add("open");
    const exits = modal.querySelectorAll(".modal-exit");
    exits.forEach(function (exit) {
      exit.addEventListener("click", function (event) {
        event.preventDefault();
        modal.classList.remove("open");
        timeline.pause();
      });
    });
  });
});


// Start animation only if modal has 'is-open' class, else reverse animation from the beginning
// const modalOne = document.querySelector("modal");
// const isVisible = modalOne.classList.contains("is-open");

// if (isVisible) {
//   animateStackingImages()
// }