juicyz
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by 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!
[Fixed]No delay between TimelineMax.play
in GSAP
Posted
Actually that demo was perfect. My Tweens needed the repeat: -1, and repeatDelay on them. Thanks a ton!