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.
TimelineMax Particles Loop
in GSAP
Posted
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>