tibo78 Posted October 9, 2021 Share Posted October 9, 2021 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 More sharing options...
Solution akapowl Posted October 9, 2021 Solution Share Posted October 9, 2021 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. 3 Link to comment Share on other sites More sharing options...
tibo78 Posted October 9, 2021 Author Share Posted October 9, 2021 Thank you @akapowl! 1 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