not a feature request, but a question - How can I call animation from multiple elements

[nirsh5]

Hi! I'm trying to use controls to play animation by clicking on a button.

the documentation describes how to achieve it only with a single button (querySelector) and it works great, the problem is that I can't call the same animation from multiple elements (with the same class), I tried to use querySelectorAll but it didn't work:

` var animation = anime({ targets: '.reds', translateX: ['-100%', '100%'], duration: 1600, easing: 'easeInOutQuad', autoplay: false, });

var oks = document.querySelectorAll(".correct");

for(x=0; x<oks.length; x++){ var ok = oks[x]; ok.addEventListener("click", function(){ animation.play; }); }`

does anyone have an idea please :) thank you so much!

[sadeghbarati]

Hi use Codepen for better collaboration

I'm not quite sure what is your goal but here sample:

red (element to animate) 😒 correct (element to trigger specified red animate) 😐

red1 correct1
red2 corrcet2
red3 correct3

---

1. Control click and animations with functions and arguments 🥇

2. forEach way 🥈

   
   const animationStorage = [];
   const redElements = [].slice.call(document.querySelectorAll('.reds'));
   const correctElements = [].slice.call(document.querySelectorAll('.correct'));

redElements.forEach((redItem, redIndex) => { const redAnimations = anime({ targets: redItem, translateX: ['-100%', '100%'], duration: 1600, easing: 'easeInOutQuad', autoplay: false, }); animationStorage.push(redAnimations) })

correctElements .forEach((correctItem, correctIndex) => { currItem.addEventListener("click", function() { animationStorage[correctIndex].play; }); })

Close ur issue after this
@juliangarnier open discussion for anime repository