Use loop in GSAP for taking multiple object's

Question

Ho everyone ..

I was wondering is it possible to use loop in GSAP or maybe it have a something special for this situation's.

In my situation I have ul element with 30 li item's.

I want to give them individual animations which be increased.

For example like this

TweenMax.to($(".blue"), 1,{x:100,y:50},"+=1")
TweenMax.to($(".red"), 1,{x:10,y:50},"+=1")
TweenMax.to($(".purple"), 1,{x:80,y:10},"+=1")
TweenMax.to($(".green"), 1,{x:35,y:70},"+=1")

ul li {
  position:absolute;
  left:50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenMax.min.js"></script>
<ul>
  
  <li class="blue">1</li>
  <li class="red">2</li>
  <li class="purple">3</li>
  <li class="green">4</li>
</ul>

Like you use from snippet below there are 30 li item's with icon's and when window onload this icon's are spread to any random position that choosed by Js.

How to organize this code with loop.

Try 1. forEach loop

let liItems = document.querySelectorAll("li");

[...liItems].forEach((items) => {
    TweenMax.to(items, 1,{x:35,y:70},"+=1")
}

This didn't worked.

Try 2 for Loop

let liItems = document.querySelectorAll("li");

for(let i = 0;i < liItems.length;i++){
   TweenMax.to(liItems[i], 1,{x:35,y:70},"+=1")
}

Also didn't worked for me.

Please help

Answer 1

Try this one (you might have to mess with the random number high value a little bit ...

const randomNum = (low, high) => {
  const r = Math.floor(Math.random() * (high - low + 1)) + low;
  return r;
};

let liItems = document.querySelectorAll('li');

liItems.forEach(items => {
  TweenMax.to(items, 1, { x: `${randomNum(0, 180)}`, y: `${randomNum(0, 100)}` });
});