GSAP Array index i Element Hover Animation

[AkhilRaja]

I want to create a hover animation when I move my mouse on Slide 1, Slide 2, Slide 3,... etc will animate Slide A, Slide B, Slide C,... etc

I successfully created hover animation when I move my mouse on Slide A, Slide B, Slide C,... etc to animate the target element but can not create this animation work for Slide 1, Slide 2, Slide 3,... etc because these elements have two different parent element so I can not make it work.

I hope anyone can figure this out and help me thank you.

See the Pen KKmeZBw?editors=1000 by AkhilRaja (@AkhilRaja) on CodePen

[OSUblake]

Just create an array for both sets of slides. Note that IDs have to be unique. So give your first 5 slides a certain class name, and so on with your second set.

let slides1 = gsap.utils.toArray(".slide-1");
let slides2 = gsap.utils.toArray(".slide-2");

slides1.forEach((el, i) => {
  
  // here's the matching one
  let slide2 = slides[i];
});

 

[AkhilRaja]

Thanks @OSUblake ill start working on it😊

[AkhilRaja]

See the Pen zYwayRK?editors=0010 by AkhilRaja (@AkhilRaja) on CodePen

Its done now and its working 😊

Thank you so much @OSUblake and everyone in GSAP for always helping me 🎉