[Fixed]No delay between TimelineMax.play

[juicyz]

Hey guys, this is my first day with GSAP and just trying to make some basic animations.  I went through the tutorial slides and I found one thing I wanted pretty similar too.

 

Currently I'm trying to make TimelineMax repeat itself with no delays between each other.  Current there is about a 1sec-1.5sec delay between the animations.  The code below makes a particles field like you are flying through space (star wars)(same as the tutorial slides).  I'm pretty sure it is the insertionTime but I've tried multiple other techniques by changing it from timelines to just tweens and looping but it never did what I was looking for.  What's the best way to get rid of the delay?

function generateParticles() {
      var i = 300,
      j = 0,
      radius = 650,
      centerX = width/2,
      centerY = height-130,
      tl = new TimelineMax({paused: true, onComplete: timeCompleteHandler, onCompleteParams: [true]});

      while(--i > -1) {
         var dot = document.createElement("img");
         dot.src = "img/dot.png";
         $("#dotContainer").append(dot);
         dot.style.cssText = "position:absolute; left:" + centerX + "px; top:" + centerY + "px; width:1px; height:1px; -webkit-filter: hue-rotate(" + (Math.random() * 360) + "deg);";

         var dot1 = document.createElement("img");
         dot1.src = "img/dot.png";
         $("#dotContainer").append(dot1);
         dot1.style.cssText = "position:absolute; left:" + centerX + "px; top:" + centerY + "px; width:1px; height:1px; -webkit-filter: hue-rotate(" + (Math.random() * 360) + "deg);";

         var angle = Math.random() * Math.PI * 2, 
             angle1 = Math.random() * Math.PI * 2,
             insertionTime = j++ * 0.015;

         tl.from(dot, 0.05, {opacity:0, immediateRender: true}, insertionTime);
         tl.to(dot, .7, {left: Math.cos(angle) * radius + centerX, 
            top: Math.sin(angle) * radius + centerY, 
            width: 32,
            height: 32,
            ease: Cubic.easeIn,
            onComplete: completeHandler,
            onCompleteParams: [dot]
         }, insertionTime);

         tl.from(dot1, 0.05, {opacity:0, immediateRender: true}, insertionTime);
         tl.to(dot1, .7, {left: Math.cos(angle1) * radius + centerX, 
            top: Math.sin(angle1) * radius + centerY, 
            width: 32,
            height: 32,
            ease: Cubic.easeIn,
            onComplete: completeHandler,
            onCompleteParams: [dot1]
         }, insertionTime);
      }
      tl.play();
   }

   function completeHandler(dot) {
      if (keep) {
         console.log("yay");
         var copy = dot.cloneNode(true);
         $("#savedDots").append(copy);
      }
   }

   function timeCompleteHandler(data) {
      if (data) 
         keep = false;
      $("#dotContainer").empty();
      generateParticles();
   }

Thank you for your help!

[Diaco]

Hi juicyz 

 

pls make a Codepen Demo available  : How to Create a CodePen Demo

 

and i think this can help you  : 

See the Pen wBGvgW by MAW (@MAW) on CodePen

[juicyz]

Actually that demo was perfect.  My Tweens needed the repeat: -1, and repeatDelay on them.  Thanks a ton!