@jenya1995

Как повесить событие на все элементы при использовании библиотеки GSAP?

Проблема с перебором элементов при использовании библиотеки gsap.

Удается получать все элементы в массив, но не могу внедрить код из библиотеки, в js, чтобы все работало. На данный момент анимация работает только по первой ссылке, хотя forEach видит все 3 ссылки..
<section class="banner-1">
   <div class="banner-carts">
        <a class="banner-carts__link  banner-carts-link" href="#">
          <img src="img/honey.webp" class="banner-carts__img-honey  banner-carts-img" alt="Мед">
        </a>

        <a class="banner-carts__link  banner-carts-link" href="#">
          <img src="img/mint.webp" class="banner-carts__img-mint  banner-carts-img" alt="Мята">
        </a>

        <a class="banner-carts__link  banner-carts-link" href="#">
          <img src="img/lemon.webp" class="banner-carts__img-lemon  banner-carts-img" alt="Лимон">
        </a>
   </div>
<section>


let tl = gsap.timeline();

  let bannerLinks = document.querySelectorAll('.banner-carts-link')

  bannerLinks.forEach(function (btn) {
    btn.addEventListener('click', function (e) {
      let bannerLink = document.querySelector('.banner-carts-link')



      let animate = gsap.timeline({ paused: true });

      animate.fromTo(".banner-1", { display: "flex", delay: 0.5, duration: 2 }, { display: "none", scale: 0, duration: 2 })
        .fromTo(".banner-2", { display: "none", scale: 0, duration: 2 }, { display: "block", scale: 1, duration: 2 })
      bannerLink.addEventListener("click", () => animate.play());

    })
  })


Такой же эффект получается и без использования перебора, работает только первая ссылка...

let tl = gsap.timeline();

  let bannerLink = document.querySelector('.banner-carts-link')

  let animate = gsap.timeline({ paused: true });

  animate.fromTo(".banner-1", { display: "flex", delay: 0.5, duration: 2 }, { display: "none", scale: 0, duration: 2 })
         .fromTo(".banner-1", { display: "none", scale: 0, duration: 2 }, { display: "block", scale: 1, duration: 2 })
  bannerLink.addEventListener("click", () => animate.play());
  • Вопрос задан
  • 21 просмотр
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы