FearMe4va Posted July 23, 2020 Share Posted July 23, 2020 hey how do make it animate for each link its happening for all the link once i hover on that link should only animate rest shouldn't please help See the Pen WNrPyjq by Fearless4va (@Fearless4va) on CodePen Link to comment Share on other sites More sharing options...
Ihatetomatoes Posted July 23, 2020 Share Posted July 23, 2020 Hi @FearMe4va, see the below example how to loop over all links and create mousenenter and mouseleave for each of them. See the Pen RwrvdmW by ihatetomatoes (@ihatetomatoes) on CodePen The example above works fine and also uses GSAP3 syntax instead of old GSAP2. const buttons = document.querySelectorAll('a'); buttons.forEach(button => { const letters = button.querySelectorAll('a span'); // Timeline const tl = gsap.timeline({paused: true}); tl.to(letters, { duration:1, color: 'black', ease: Expo.easeOut, stagger: 0.02 }); // HOVER button.addEventListener("mouseenter", function(){ tl.play(); }); button.addEventListener("mouseleave", function(){ tl.reverse(); }); }); Hope that helps with your GSAP question. The rest is only your CSS. Happy tweening. 4 Link to comment Share on other sites More sharing options...
FearMe4va Posted July 23, 2020 Author Share Posted July 23, 2020 Thanks a lot i will do the rest Link to comment Share on other sites More sharing options...
ZachSaucier Posted July 23, 2020 Share Posted July 23, 2020 I think you'd learn from the most common GSAP mistakes article as it covers a lot of the changes that Petr made above: Also keep in mind that you can (should) use the condensed string form for eases: ease: 'expo' Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now