I'm trying to animate an array of Mesh objects the array looks like this

[{truck_id:1,sphere:MeshObject,vec:Vector3Object,positions:[{instance:20,x:1,y:2,z:0},{instance:40,x:4,y:1,z:0},{instance:60,x:2,y:1,z:0}]},{truck_id:2,sphere:MeshObject,vec:Vector3Object,positions:[{instance:20,x:10,y:2,z:0},{instance:40,x:14,y:1,z:0},{instance:60,x:2,y:1,z:0}]},{truck_id:3,sphere:MeshObject,vec:Vector3Object,positions:[{instance:20,x:11,y:20,z:0},{instance:40,x:42,y:1,z:0},{instance:60,x:2,y:11,z:0}]}]

I am trying to loop through instance 20 to instance 60 and animate the position changes of these 3 spheres simultaneously in a stepped manner.

So far i have tried

for (let i =20; i<=60;i+=20){
task(i);
}
function task(i) {
  setTimeout(function () {
    for(let j=0;j<trucks_arr.length;j++){
      var position = trucks_arr[j].positions.find(function (el) {return el.instance == i});
      trucks_arr[j].vec.x=position.x
      trucks_arr[j].vec.y=position.y
    }
  }, 100 * i);
}