Refering to the slide TimelineLite Labels in the Demo on this page http://greensock.com/jump-start-js#comment-497907
How could I make the particles loop indefinitely without having a delay in between each iteration of the animation? I can get it to loop infinitely using the code below but the delay is making things not so smooth and not what I want the user to experience. Basically I want it to look like they are infinitely traveling at warp speed through space just for fun to see if I can do it.
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css"> #demoBackground { position: relative; background-color: #000; overflow: hidden; width: 100%; height: 100%; visibility: hidden; } #particlesBtn { margin: 10px auto 0; width: 120px; } </style> </head>
<body> <div id="viewContent" class="boxBorder innerBoxSmall spinnerImg"> <div id="demoBackground"> <div id="dotContainer"></div> </div> <button class="btn" id="particlesBtn">REPLAY</button> </div> <script type="text/javascript" src="Scripts/greensock/TweenMax.min.js"></script> <script type="text/javascript"> $(window).load(function () { var dotContainer = $("#dotContainer"), particlesBtn = $("#particlesBtn"), tl = new TimelineMax({ repeat: -1 }); function getParticlesAnimation() { var particlesTimeline = new TimelineMax({ repeat: -1 }), i = 400, radius = 400, centerX = 314, centerY = 145, dots = [], rawDots = []; while (--i > -1) { dot = document.createElement("img"); dot.src = "/Content/images/dot.png"; dot.id = "dot" + i; dotContainer.append(dot); dot.style.cssText = "position:absolute; left:" + centerX + "px; top:" + centerY + "px; width:1px; height:1px;" var angle = Math.random() * Math.PI * 2, insertionTime = i * 0.001; particlesTimeline.from(dot, 0.001, { opacity: 0, immediateRender: true }, insertionTime); particlesTimeline.to(dot, .7, { left: Math.cos(angle) * radius + centerX, top: Math.sin(angle) * radius + centerY, width: 20, height: 20, ease: Cubic.easeIn, }, insertionTime); } return particlesTimeline; } // build timeline tl.add(getParticlesAnimation(), "particles") //controls particlesBtn.click(function () { tl.play('particles'); }); //show the demoBackground div after DOM is ready and all images loaded TweenLite.set($("#demoBackground"), { visibility: "visible" }); }); </script>
</body>
</html>
