Jump to content


Applying same animation to different elements on hover?

Recommended Posts

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

Link to comment
Share on other sites

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()



Hopefully that helps.


Happy tweening and welcome aboard.


  • Like 5
Link to comment
Share on other sites

That works great, thank you very much PointC!

  • Like 1
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.