title: ThreeJs/TweenJS add delay between tween with a for loop
body: <p>currently working on a bin packing problem using Three.JS and Tween.JS I'm actually struggling using animation.
  I have a loop where I place a bunch of Plane Geometry stored in a variable in a canvas using the TWEEN object. What I would like to do is to play successively my animation and not at the same time. I already used the setTimeout solution with no success. What is the solution for ThreeJS/TweenJs to wait between each animation loop?</p>
  <p>Bin packing placement code :</p>
  <pre><code>var GeometryArray = Array();
  
  for(let i=0; i &lt; elementNumber; i++){
                  let elementHeight = GeometryArray[i].geometry.parameters.height;
                  let elementWidth = GeometryArray[i].geometry.parameters.width;
                  calc = 5 - cursorX.position.x
                  calc2 = 5 - cursorY.position.y
                  if(elementWidth &lt;= (5 - cursorX.position.x)){
                      console.log(&quot;1&quot;)
                      MoveObject(GeometryArray[i], cursorX.position.x + elementWidth/2, cursorY.position.y +elementHeight/2)
                      cursorX.position.x += elementWidth;
                      if(cursorMax.position.y &lt; GeometryArray[i].position.y + elementHeight/2){
                          cursorMax.position.y = GeometryArray[i].position.y + elementHeight/2;
                      }
                  }
                  else if(elementHeight &lt;= (5 - cursorMax.position.y)){
                      console.log(&quot;2&quot;)
                      cursorY.position.y = cursorMax.position.y;
                      cursorX.position.x = -5; 
                      MoveObject(GeometryArray[i], cursorX.position.x + elementWidth/2, cursorY.position.y +elementHeight/2)
                  }
                  else{
                      actualIndex = i
                      //gestion du placement des élément dans les interstices
                      for(let j=0;j&lt;i;j++){
                          console.log(&quot;ENTERED&quot;)
                          //récupération et calcul de la différence de hauteur entre les element J et J+1 déjà posés
                          hauteurJ = GeometryArray[j].position.y + GeometryArray[j].geometry.parameters.height/2
                          hauteurJ1 = GeometryArray[j+1].position.y + GeometryArray[j+1].geometry.parameters.height/2
                          positionDroitElementJ = GeometryArray[j].position.x + GeometryArray[j].geometry.parameters.width
                          calcHauteur = hauteurJ - hauteurJ1;
                          calcLargeur = 5 - positionDroitElementJ;
                          //Si il y a assez d'espace entre les 2 élement pour contenir un autre element et qu'il y a assez de largeur, on place le curseur et l'élement
                          if(calcHauteur &gt;= elementHeight &amp;&amp; calcLargeur &gt;= elementWidth){
                              console.log(&quot;calc&quot; + calcLargeur + &quot; width = &quot; + elementWidth)
                              //On place le curseur sur le coin haut gauche de l'élement J+1
                              cursorY.position.y = hauteurJ1
                              cursorX.position.x = GeometryArray[j+1].position.y - GeometryArray[j+1].geometry.parameters.height/2
                              MoveObject(GeometryArray[i], cursorX.position.x + elementWidth/2, cursorY.position.y +elementHeight/2)
                          }
                          else{
                              //l'élément est impossible à placer donc on supprime
                              GeometryArray[i].geometry.dispose();
                          }
                      }
                  }
              }
  </code></pre>
  <p>My function to animate the set position :</p>
  <pre><code>function MoveObject(mesh, positionX, positionY){
                      var position = { x : mesh.position.x, y : mesh.position.y };
                      var target = { x : positionX, y : positionY };
                      var tween = new TWEEN.Tween(position).to(target, 1000);
                      tween.onUpdate(function(){
                          mesh.position.x = position.x;
                          mesh.position.y = position.y;
                      });
                      tween.start();
              }
  </code></pre>