JavaScriptで同じクラス名を交互に処理していくにはどうしたらいいですか？

JavaScript

1 </script>2gsap.registerPlugin(ScrollTrigger);3 4 // 各メッセージ要素を取得5 const aMessages = document.querySelectorAll(".a");6 const bMessages = document.querySelectorAll(".b");7 8 // メッセージごとにアニメーションを追加9 aMessages.forEach((a) => {10 gsap.fromTo(11 a,12 {13 scale: 3,14 autoAlpha: 0,15 filter: "blur(2px)",16 textShadow: "0 0 16px navy",17 },18 {19 scale: 1.3,20 autoAlpha: 1,21 filter: "blur(0px)",22 textShadow: "0 0 0px navy",23 scrollTrigger: {24 toggleActions: "play none none reverse",25 trigger: a,26 start: "50% 50%",27 end: "bottom 20%",28 markers: true,29 scrub: true,30 },31 }32 );33 });34 35 bMessages.forEach((b) => {36 gsap.fromTo(37 b,38 {39 scale: 1,40 autoAlpha: 0,41 },42 {43 scale: 1.3,44 autoAlpha: 1,45 scrollTrigger: {46 toggleActions: "play none none reverse",47 trigger: b,48 start: "50% 50%",49 end: "bottom 20%",50 scrub: true,51 },52 }53 );54 });55 </script>