Jump to content
Search Community

Timeline play on mouseenter works only for one element

kohlej test
Moderator Tag

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

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

Link to comment
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
Link to comment
Share on other sites

  • 2 weeks later...

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.
×
×
  • Create New...