Wrong loop

[tibo78]

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

[akapowl]

 

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.

 

[tibo78]

Thank you @akapowl!