.hover only animating one element with same ID name

[chris.btbi]

Hi all, 

 

I'm looking to see if anyone could advise me as to what I'm doing wrong with this pen. I'd like each location on the map to pulsate on mouseover. Also, I'd like to trigger another animation based on each specific location, would you recommend I do this by targeting the class instead of the ID? 

 

Thank you for your help, I'm still really new at greensock, javascript and jquery. 

 

- Chris

See the Pen pEdOWB?editors=1010#0 by chrisbtbi (@chrisbtbi) on CodePen

[Payman]

The id attribute specifies a unique id for an HTML element, you can't use same id for multiple elements. You need to use unique ids like #location1, #location2 etc. for each element and apply animations separately 

[Carl]

Yup Payman is exactly right. You can't use the same ID more than once in your html.

 

I think reading this post from PointC: http://greensock.com/forums/topic/15190-hover-animation-fast-rollin-causes-ani-to-get-stuck/?p=65781 and studying his demo will help you alot.

 

similar approach (using each()) but allows for reversing the animation on mouseleave:

http://codepen.io/GreenSock/pen/WxgdRz?editors=0010

 

a little simpler and without timelines

http://codepen.io/GreenSock/pen/af138af51e5decd43c3c57e8d60d39a7?editors=0010

[chris.btbi]

Thanks Carl and Payman! I figured it out and moved the project further along!