How do i Animate it foreach link

[FearMe4va 0 Likes (Newbie)]

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

[Ihatetomatoes 311 Likes (Leader)]

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.

[FearMe4va 0 Likes (Newbie)]

Thanks a lot i will do the rest

[ZachSaucier 5,987 Likes (Superhero)]

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'