Posted October 29 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 Quote Share this post Link to post Share on other sites
Posted October 30 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 4 1 Quote Share this post Link to post Share on other sites
Posted November 12 Hi @ZachSaucier, Sorry for late replay. Thank you for helping, it works great Quote Share this post Link to post Share on other sites
