[Problem with concurrently tweening dynamically created elements]

Hi jamiejefferson,

 

Thanks so much for your response! What a school girl error! Sometimes you get too close to see that you're being a donut!

 

It now works perfect! Thanks so much

 

Kind regards,

 

laura

[Problem with concurrently tweening dynamically created elements]

Hi Diaco.AW,

 

Thanks so much for your response and comments. I'm sorry I'm not familiar with code pen - but I see that it's really useful!

 

I'll definitely take a look

 

Thanks again and kind regards,

 

Laura

[Problem with concurrently tweening dynamically created elements]

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