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!
