Hi,
I'm trying to tween multiple elements which have been created dynamically. The problem is, that when the new element starts tweening, it stops the tween on the previous element. I've tried using timelines and normal tweens.
I've attached the html file, but here's the main javascript code:
var boxNum = 0;
function newBox()
{
document.getElementById('boxes').innerHTML += "<div id='b"+boxNum+"' class='box'></div>";
//random left variable
var leftVar = Math.floor(Math.random() * 560) + 5;
//set animation
TweenLite.to($('#b'+boxNum+'')[0], 0, {css:{top:-50, left:leftVar}});
TweenLite.to($('#b'+boxNum+'')[0], 2, {css:{top:460}, ease:Sine.easeIn});
TweenLite.delayedCall(1.5, newBox);
boxNum++;
}
Any help to make multiple dynamically created elements tween at the same time would be appreciated.
Kind regards,
Laura
)
multi-tweens.html
