Applying same animation to different elements on hover?

[dmaller]

From my codepen you can see that hovering any of the parent divs results in my animation slewing across them all. In order to isolate the animation per hovered parent element I could copy paste the code using a unique ID per parent, but that seems very inefficient. Is there a way to write a main script and pass in parameters from each parent div? I'm really new to javascript logic but I could follow along if another post like this has been mentioned before. Thanks.

 

edit: just to clarify, I'm basically wondering how I could refactor my code

See the Pen xOJQYB by djmaller (@djmaller) on CodePen

[PointC]

Hi dmaller 

 

Welcome to the GreenSock forums and thanks for becoming a Club Member. 

 

For separate hovers like that, you'll want to use jQuery's each method. Each element gets its own timeline and you can hover over/out without triggering the others.

 

Here's a fork of your pen with that solution:

 

See the Pen yJqQqj by PointC (@PointC) on CodePen

 

Some more reading about each()

https://api.jquery.com/each/

 

Hopefully that helps.

 

Happy tweening and welcome aboard.

[dmaller]

That works great, thank you very much PointC!