AkhilRaja Posted August 1, 2021 Share Posted August 1, 2021 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 Link to comment Share on other sites More sharing options...
Solution OSUblake Posted August 2, 2021 Solution Share Posted August 2, 2021 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]; }); 4 1 Link to comment Share on other sites More sharing options...
AkhilRaja Posted August 2, 2021 Author Share Posted August 2, 2021 Thanks @OSUblake ill start working on it😊 Link to comment Share on other sites More sharing options...
AkhilRaja Posted August 2, 2021 Author Share Posted August 2, 2021 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 🎉 3 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now