Sprite Animation for navigation icons

[noodlesp]

Hi,

 

I am trying to make a navigation for a website using sprite animations. Each button should play once on hover, and then reverse when unhovered.

 

I came across this pen from another thread here that was close to what I needed: 

See the Pen VLWvQx by klausgrundahl (@klausgrundahl) on CodePen

 

And made some changes so that there were multiple images:  (in reality I want each one to have its own background sprite, but for the sake of this I just made them different background colours)

 

How can I make it so that when I hover one of them, only that particular one moves, not all three at once? I don't mind having to give each one separate classes or individual ids.

 

This pen (

See the Pen pjbqvE by MAW (@MAW) on CodePen

) achieves part of what I need but the animation way simpler there, and I can't figure out how to combine the two to get what I need... Seems like it should be super simple but my newbie brain can't quite do it.

 

Hope someone can help.

 

Thanks!

See the Pen jbXjNe by anon (@anon) on CodePen

[Diaco]

Hi noodlesp 

 

pls check this thread for hover animations : http://greensock.com/forums/topic/11259-problems-in-hover-animations-in-elements/