Targeting individual svg elements for hover effect

[soma]

Hi!
I've made an SVG image with several different objects. The interaction would be this:
- If you hover an element there would be a small effect on this element. (a scale, rotate and move depending on the mouse position.)
- If you hover out the element get back to the original position.
Currently, I have a problem with the targeting, the effect animates all the elements in the SVG. ...And some with the mouse position tracking:)
How can I solve this? 
Thanks for the help in advance

See the Pen ExQWZem by szsoma (@szsoma) on CodePen.

[PointC]

Hi @soma 

 

Welcome to the forum.

 

Probably easiest to create a tween for each one and play/reverse on mouseenter/leave. Maybe something like this.

 

See the Pen 81af104f98ab206012f97eab84edc8b9 by PointC (@PointC) on CodePen.

 

 

Happy tweening and welcome aboard.

 

[soma]

Hi!

Thanks for the quick answer. I think I just overcomplicated this issue ?

[Cassie]

just sneaking in to say this pen is cute. 10/10

[PointC]

Glad to help and don't worry about overcomplicating it. It happens to all of us.

 

Happy tweening.