Jump to content
GreenSock

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

Wrong loop

Go to solution Solved by akapowl,

Recommended Posts

Hello,

 

My animation should happen on a click of one button that is having the ".btn-ripple" class. Issue is that when I click on one button the other buttons' animation are fired too (as they all have the same class). Could you please guide me where I should look to find the right code ? I am trying to make a loop on this specific animation.

 

gsap.utils.toArray(".btn-ripple").forEach(btn =>
    
    btn.addEventListener("click", function(ev) {
    
    gsap.fromTo(".ripples", {
    border: '1px solid #fff',
    left: ev.offsetX,
    top: ev.offsetY,
    height: 0,
    width: 0,
    opacity: 1,
  }, {
    border: '0px solid #fff',
    height: 60,
    width: 60,
    opacity: 0,
    duration: 1,
    ease: "power2.out",
    stagger: 0.2,
  });

}
                        
)
)   

 

Thank you

 

Thibaut

Link to comment
Share on other sites

  • Solution

 

Hello @tibo78

 

It's really hard to tell from just a code-snippet of your JS code, that's why the forum guidelines state, that it's always best to add a minimal demo to your question.

 

If your .btn-ripple and your .ripples are within the same container, you might just need to select the specific .ripples within that container the button you are looping over is in, something like

 

gsap.utils.toArray(".btn-ripple").forEach(btn =>
    
    btn.addEventListener("click", function(ev) {
    
    gsap.fromTo(btn.parentElement.querySelectorAll('.ripples'), {	// <------
      
      ...

 

... or if the .ripples are only just within that button it would just be

 

gsap.utils.toArray(".btn-ripple").forEach(btn =>
    
    btn.addEventListener("click", function(ev) {
    
    gsap.fromTo(btn.querySelectorAll('.ripples'), {	// <------
      
      ...

 

 

 

Depending on how the structure of your HTML markup is, things might become more complicated though.

 

Although this is not really GSAP specific in the first place, but more of a general JS question, your chances of getting a solid answer will be way higher with a minimal demo attached.

 

  • Like 3
Link to comment
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.
×