GreenSock JS adding dom element within Tween onComplete()

Question

I'm trying to get past a GreenSock JS issue that you might be able to help me with.

After a tween of container div width, I'm trying to append an inline div into the newly created container space using the onComplete() event.

The new div does not immediately get added to the space. On the next add action (that creates additional container width), the previously created div appears.

I'm trying to solve within the GreenSock context, but all ideas are welcomed.

Thanks!

TweenLite.to($('.list-item-container'), 1, {
  width: $('.list-item-container').width() + 253,
  delay: 0.25,
  onComplete: function () {
     var _item = document.createElement('div');
     $(_item).addClass('list-item');
     $('.list-item-container').append(_item);
  }
});

Answer 1

It looks like the tween is complete before jQuery is ready.

$(function() {
    TweenLite.to($('.list-item-container'), 1, {
      width: $('.list-item-container').width() + 253,
      delay: 0.25,
      onComplete: function () {
       var _item = $("<div/>");
       $(_item).addClass('list-item');
       $('.list-item-container').append(_item);
      }
   });
});

http://jsbin.com/lesire/1/

This also works for when I put it inside of a triggered event.

$("#button").on('click', function(){
    TweenLite.to($('.list-item-container'), 1, {
      width: $('.list-item-container').width() + 253,
      delay: 0.25,
      onComplete: function () {
       var _item = $("<div/>");
       $(_item).addClass('list-item');
       $('.list-item-container').append(_item);
      }
   });
});

I created a JSBin that demonstrates it.

http://jsbin.com/zuyinu/5/

You might want to consider using an id to identify your list-item-container because

$('.list-item-container').append(_item);

will append _item to every element with the list-item-container class.

Good luck!