I'm struggling with iterating through two arrays in order to adjust my gsap timeline accordingly.
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,
});
I want the index values to match up, so if subTabs[0] triggers a "mouseover" event, then I want the corresponding expandTabs[0] to undergo the new animations. The same should happen for the "mouseout" event. What am I missing here?
subTabs.forEach((subTab, index) => {
const expandTab = expandTabs[index];
console.log(subTab, expandTab);
// Event Listener for Hover On
subTab.addEventListener("mouseover", (event) => {
console.log("you clicked on region number " + index);
tl.to(expandTab, {
visibility: "visible",
opacity: 1,
scale: 1,
});
});
// Event Listener for Hover Off
subTab.addEventListener("mouseout", (event) => {
console.log("you exited region number " + index);
tl.to(expandTab, {
visibility: "hidden",
opacity: 0,
scale: 0,
});
});
});