Tengo problemas para iterar a través de 2 matrices para cambiar mi línea de tiempo de gsap.
const subTabs = Array.from(document.querySelectorAll(".subtab")); const expandTabs = Array.from(document.querySelectorAll(".expandtab")); const tl = gsap.timeline({ defaults: { duration: 1, yoyo: true, } }); tl.set(expandTabs, { visibility: "hidden", opacity: 0, scale: 0, });Necesito que los valores de índice se correspondan, por ejemplo, si subTabs[0] está "pasando el mouse", entonces expandTabs[0] necesita que se le apliquen las nuevas animaciones. Viceversa con "mouseout". ¿Qué estoy haciendo mal aquí?
subTabs.forEach((subTab, index) => { const expandTab = expandTabs[index]; console.log(subTab, expandTab); // Event Listener Hover on subTab.addEventListener("mouseover", (event) => { console.log("you clicked region number " + index); tl.to(expandTab[index], { visibility: "visible", opacity: 1, scale: 1, }); }); // Event Listener Hover off subTab.addEventListener("mouseover", (event) => { console.log("you exited region number " + index); tl.to(expandTab[index], { visibility: "hidden", opacity: 0, scale: 0, }); }); });Tal vez su segundo oyente debería ser mouseout en lugar de otro mouseover .
subTab.addEventListener("mouseout", (event) => { Con respecto al problema del índice, ¿por qué no usar una id generada para recuperar el elemento?
Tal como está, su línea aquí podría funcionar mejor como:
tl.to(expandTab, { visibility: "visible", opacity: 1, scale: 1, });