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.
) 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.
Sprite Animation for navigation icons
in GSAP
Posted
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