Jump to content
GreenSock

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

How do i Animate it foreach link

Recommended Posts

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 post
Share on other sites

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.

  • Like 4
Link to post
Share on other sites

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 post
Share on other sites

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.

×