[JS] SET OBJECT POSITION

Math,

I've been playing with the code and while I can get it to work with one group, I can't figure out how to make it work with multiple groups.

The issue I've got is that I've got buttons with states, when grouped, the whole group changes state on hover and click.

I've tried separating them out into 12 groups, and I'm trying to use the code below to move the groups, but it doesn't work.

gsap.to( allGroups[0].parentElement, { duration:0.5, x: -808});
gsap.to( allGroups[1].parentElement, { duration:0.5, x: -692});
gsap.to( allGroups[2].parentElement, { duration:0.5, x: -576});
gsap.to( allGroups[3].parentElement, { duration:0.5, x: -468});
gsap.to( allGroups[4].parentElement, { duration:0.5, x: -459});
gsap.to( allGroups[5].parentElement, { duration:0.5, x: -344});
gsap.to( allGroups[6].parentElement, { duration:0.5, x: -344});
gsap.to( allGroups[7].parentElement, { duration:0.5, x: -229});
gsap.to( allGroups[8].parentElement, { duration:0.5, x: -113});
gsap.to( allGroups[9].parentElement, { duration:0.5, x: -17});
gsap.to( allGroups[10].parentElement, { duration:0.5, x: 96});
gsap.to( allGroups[11].parentElement, { duration:0.5, x: 212});
gsap.to( allGroups[12].parentElement, { duration:0.5, x: 328});

I should point out I've got the screen divided into 10 sections, with shapes reacting to hovers to move my group horizontally back and forth across the screen.

Using just one group [0] with all the objects inside it works fine but I get the hover issue.

Can you help?

R.