Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
chris.btbi

.hover only animating one element with same ID name

Go to solution Solved by Payman,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Link to comment
Share on other sites

  • Solution

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 

  • Like 4
Link to comment
Share on other sites

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

  • Like 2
Link to comment
Share on other sites

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

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.
×