Проблема с перебором элементов при использовании библиотеки 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());