Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
kohlej

Timeline play on mouseenter works only for one element

Recommended Posts

Hello guys,

I'm trying to create a animation for hover on menu links.
My code isn't doing what I want, and I couldn't find solution that didn't include jQuery.

So my question is, how do I get animation play for each link?
Right now if you hover over link 'Home', it runs animation for all links in menu, I'm guessing I need each loop?
Also, if I hover over other links, it won't run. Same problem?

Thanks in advance
 

See the Pen MWWvrxd by artyor (@artyor) on CodePen

Share this post


Link to post
Share on other sites

Hey kohlej,

 

A few things here:

  • You're using document.querySelector('.btn'), but this only select the first button. You want to be using querySelectorAll() instead.
  • One you make the change above, you will see errors appear because you can't add event listeners to a node list (which is what querySelectorAll() returns). So yes, you will have to iterate through each of the buttons to add event listeners to each. There are many ways to do this, but I included one way in the demo below.
  • Your tween selects every element with the .one and .two classes on the page (because GSAP automatically uses document.querySelectorAll() for selector strings in the target position). You aren't wanting that, so you need to provide a scoped selector as the target.
  • It's generally better to use .addEventListener() rather than .onsomething because that way your listener can't be overwritten by some other JS on the page.

Altogether it should look something like this:

 

See the Pen JjjrmWK?editors=0010 by GreenSock (@GreenSock) on CodePen

  • Like 4
  • Thanks 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×